/* ═══════════════════════════════════════════════════════════
   KHIIMORI WORLD — front-page.css
   Styles for the homepage template (front-page.php).
   Loaded only on the front page.
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background: var(--parchment);
}

/* <picture> background — sits at the very back */
.hero-bg-picture {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-bg-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Gradient overlay */
.hero-cloud-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: transparent;
}
.hero-cloud-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(242, 237, 216, 0.0)  0%,
        rgba(242, 237, 216, 0.0)  35%,
        rgba(242, 237, 216, 0.55) 60%,
        rgba(242, 237, 216, 0.88) 78%,
        rgba(242, 237, 216, 1.0)  92%
    );
}
.hero-cloud-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 120% 100% at 50% 0%, transparent 55%, rgba(242, 237, 216, 0.3) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
    padding: 0 60px 100px;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
}

.hero-logo-wrap {
    margin-top: 100px;
    margin-bottom: 32px;
}
.hero-logo {
    height: 320px;
    width: auto;
    margin: 0 auto;
    filter: drop-shadow(0 2px 12px rgba(44,26,14,0.18));
}

.hero-eyebrow {
    font-size: 9px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--sky);
    margin-bottom: 16px;
    font-weight: 500;
}

.hero-h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 300;
    line-height: 1.0;
    color: var(--earth);
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.hero-h1 em { font-style: italic; color: var(--sky); }

.hero-sub {
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--muted);
    max-width: 540px;
    margin: 0 auto 40px;
}

.hero-cta { display: inline-block; margin-bottom: 48px; }

.scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--muted-l);
}
.scroll-hint span {
    font-size: 8px;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.scroll-arrow {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--muted-l), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%, 100% { opacity: .4; transform: scaleY(1); }
    50%       { opacity: 1;  transform: scaleY(1.15); }
}

/* ═══════════════════════════════════════════════════════════
   SIGNAL STRIP
═══════════════════════════════════════════════════════════ */
.signal-strip { display: flex; height: 4px; }
.ss-1 { flex: 6; background: var(--parchment); border-top: 1px solid rgba(44, 26, 14, 0.1); }
.ss-2 { flex: 3; background: var(--sky); }
.ss-3 { flex: 1; background: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   PHILOSOPHY
═══════════════════════════════════════════════════════════ */
.philosophy {
    background: var(--earth);
    padding: 80px 60px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: center;
}

.phil-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 40px;
    font-weight: 300;
    color: var(--parchment);
    line-height: 1.2;
}
.phil-title .sky { color: var(--sky); font-style: italic; }

.phil-text {
    font-size: 12.5px;
    line-height: 2;
    color: rgba(242, 237, 216, 0.6);
    margin-bottom: 40px;
}

.phil-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.pillar { border-top: 1px solid rgba(46, 104, 186, 0.2); padding-top: 18px; }
.pillar-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    color: var(--sky);
    opacity: 0.35;
    line-height: 1;
    margin-bottom: 8px;
}
.pillar-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 21px;
    color: var(--parchment);
    margin-bottom: 6px;
}
.pillar-desc { font-size: 11px; line-height: 1.7; color: rgba(242, 237, 216, 0.35); }

/* ═══════════════════════════════════════════════════════════
   FOUNDER QUOTE
═══════════════════════════════════════════════════════════ */
.founder-quote {
    background: var(--parchment-d);
    padding: 96px 60px;
    text-align: center;
}

.fq-label {
    font-size: 9px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.7;
    margin-bottom: 36px;
}

.fq-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(22px, 2.8vw, 34px);
    font-weight: 300;
    font-style: italic;
    color: var(--earth);
    line-height: 1.65;
    max-width: 820px;
    margin: 0 auto 24px;
}

.fq-cite {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════
   STREAMS / DESTINATIONS
═══════════════════════════════════════════════════════════ */
.streams {
    padding: 96px 60px;
    background: var(--parchment);
}

.streams-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.stream-card {
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    display: block;
    color: inherit;
}
.stream-card:not([style*="cursor:default"]):hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(44, 26, 14, 0.14);
}

.sc-shop .sc-header    { background: linear-gradient(145deg, #9B6B40, #7A4A28); }
.sc-shop .sc-cta       { color: #C4522A; border-color: #C4522A; }
.sc-shop .sc-cta:hover { background: #C4522A; color: var(--parchment); }

.sc-journeys .sc-header    { background: linear-gradient(145deg, var(--sky), var(--sky-d)); }
.sc-journeys .sc-cta       { color: var(--sky); border-color: var(--sky); }
.sc-journeys .sc-cta:hover { background: var(--sky); color: var(--parchment); }

.sc-retreats .sc-header    { background: linear-gradient(145deg, var(--earth), #4A3020); }
.sc-retreats .sc-cta       { color: var(--gold); border-color: var(--gold); }
.sc-retreats .sc-cta:hover { background: var(--gold); color: var(--parchment); }

.sc-header {
    padding: 40px 32px 36px;
    position: relative;
    overflow: hidden;
}
.sc-header::after {
    content: '';
    position: absolute;
    bottom: -30px; right: -30px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(242, 237, 216, 0.05);
}

.sc-domain {
    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(242, 237, 216, 0.5);
    margin-bottom: 10px;
}

.sc-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px;
    font-weight: 300;
    color: var(--parchment);
    margin-bottom: 8px;
}

.sc-tagline {
    font-size: 9.5px;
    line-height: 1.6;
    color: rgba(242, 237, 216, 0.5);
    font-style: italic;
}

.sc-body { background: white; padding: 28px 32px 32px; }

.sc-desc { font-size: 11px; line-height: 1.8; color: var(--muted); margin-bottom: 22px; }

.sc-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; list-style: none; }

.sc-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 9.5px;
    color: var(--earth);
    line-height: 1.5;
}
.sc-feature::before {
    content: '●';
    color: var(--gold);
    font-size: 6px;
    flex-shrink: 0;
    margin-top: 3px;
}

.sc-cta {
    display: inline-block;
    border: 1px solid;
    padding: 10px 22px;
    font-size: 8.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 500;
    transition: all 0.2s;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
}

.sc-coming-badge {
    display: inline-block;
    font-size: 7.5px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(200, 144, 40, 0.4);
    padding: 4px 10px;
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.sc-form-placeholder {
    font-size: 10px;
    color: var(--muted-l);
    font-style: italic;
    margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════
   BLOG
═══════════════════════════════════════════════════════════ */
.blog {
    padding: 96px 60px;
    background: var(--parchment-d);
}

.blog-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 20px;
}

/* ═══════════════════════════════════════════════════════════
   INSTAGRAM
═══════════════════════════════════════════════════════════ */
.instagram {
    padding: 80px 60px;
    background: var(--parchment);
    text-align: center;
}

.insta-handle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    font-weight: 300;
    color: var(--earth);
    margin: 8px 0 32px;
    letter-spacing: 2px;
}

.insta-feed-wrap { margin-bottom: 32px; }

.insta-grid-placeholder {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-bottom: 16px;
}
.insta-cell {
    background: var(--parchment-d);
    aspect-ratio: 1;
    border-radius: 2px;
}

.insta-note {
    font-size: 9px;
    color: var(--muted-l);
    letter-spacing: 1px;
    font-style: italic;
    margin-bottom: 24px;
}

.btn-insta {
    display: inline-block;
    background: var(--sky);
    color: var(--parchment);
    padding: 14px 32px;
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--radius);
    transition: background 0.2s;
    font-family: 'Montserrat', sans-serif;
}
.btn-insta:hover { background: var(--sky-d); }

/* ═══════════════════════════════════════════════════════════
   NEWSLETTER
═══════════════════════════════════════════════════════════ */
.newsletter {
    background: var(--parchment);
    padding: 80px 60px;
    text-align: center;
    border-top: 1px solid rgba(44, 26, 14, 0.06);
}

.nl-eyebrow {
    font-size: 9px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}

.nl-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 38px;
    font-weight: 300;
    color: var(--earth);
    margin-bottom: 12px;
    line-height: 1.2;
}

.nl-sub { font-size: 12px; color: var(--muted); margin-bottom: 32px; }

.nl-form-wrap {
    max-width: 480px;
    margin: 0 auto 12px;
}

.nl-placeholder {
    font-size: 10px;
    color: var(--muted-l);
    font-style: italic;
    padding: 14px;
    border: 1px dashed rgba(44, 26, 14, 0.15);
    border-radius: var(--radius);
}

.nl-note { font-size: 9px; color: var(--muted-l); margin-top: 12px; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — front-page only
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .hero-content { padding: 0 24px 80px; }

    .philosophy { grid-template-columns: 1fr; gap: 40px; padding: 56px 24px; }
    .phil-pillars { grid-template-columns: 1fr 1fr; }

    .founder-quote { padding: 72px 24px; }

    .streams { padding: 64px 24px; }
    .streams-grid { grid-template-columns: 1fr; }

    .blog { padding: 64px 24px; }
    .blog-grid { grid-template-columns: 1fr; }

    .instagram { padding: 64px 24px; }
    .insta-grid-placeholder { grid-template-columns: repeat(3, 1fr); }

    .newsletter { padding: 56px 24px; }
}

@media (max-width: 480px) {
    .phil-pillars { grid-template-columns: 1fr; }
    .insta-grid-placeholder { grid-template-columns: repeat(2, 1fr); }
}