/* =========================================================
   SAHF — PHILOSOPHY PAGE
   ========================================================= */


/* =========================================================
   SHARED BUTTONS
   ========================================================= */

.phil-btn{
    display:inline-flex;

    align-items:center;

    gap:10px;

    min-height:48px;

    padding:0 26px;

    font-size:0.86rem;

    letter-spacing:0.02em;

    transition:all .25s ease;

    border:1px solid transparent;

    cursor:pointer;
}


.phil-btn-primary{
    background:var(--gold);

    color:var(--navy-deep);

    font-weight:500;
}


.phil-btn-primary:hover{
    background:#dcb769;
}


.phil-btn:hover .phil-arrow{
    transform:translateX(3px);
}


.phil-arrow{
    transition:transform .25s ease;
}


/* =========================================================
   HERO
   ========================================================= */

.phil-p-hero{

    padding:
        clamp(72px,12vw,132px)
        0
        0;

    border-bottom:
        1px solid rgba(201,162,77,0.18);

    text-align:center;
}


.phil-p-hero-inner{

    width:min(
        700px,
        calc(100% - (var(--gutter) * 2))
    );

    max-width:700px;

    margin-inline:auto;

    padding:0;

    box-sizing:border-box;
}


.phil-eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:0.74rem;

    letter-spacing:0.16em;

    text-transform:uppercase;

    color:var(--gold);

    margin-bottom:24px;
}


.phil-eyebrow::before{

    content:'';

    width:24px;

    height:1px;

    background:var(--gold);
}


.phil-p-hero .phil-eyebrow::before{

    margin-right:0;
}


.phil-p-hero h1{

    font-size:clamp(2.6rem, 5vw, 3.8rem);

    line-height:1.24;

    letter-spacing:-0.01em;

    margin-left:auto;

    margin-right:auto;
}


.phil-p-hero-sub{

    margin-top:28px;

    display:flex;

    flex-direction:column;

    gap:16px;
}


.phil-p-hero-sub p{

    font-size:
        clamp(1rem,1.6vw,1.08rem);

    line-height:1.8;

    color:var(--on-navy-mute);

    max-width:60ch;

    margin-left:auto;

    margin-right:auto;
}


.phil-p-hero-rule{

    margin:
        clamp(44px,7vw,68px)
        0
        0;

    height:1px;

    background:
        repeating-linear-gradient(
            90deg,
            var(--gold) 0 6px,
            transparent 6px 14px
        );

    opacity:0.55;
}


.phil-p-hero-caption{

    padding:
        14px 0
        clamp(48px,8vw,80px);

    font-size:0.74rem;

    letter-spacing:0.08em;

    text-transform:uppercase;

    color:var(--on-navy-mute);
}


/* =========================================================
   CHAPTERS
   ========================================================= */

.phil-chapters{

    width:100%;

    background:var(--cream);

    color:var(--on-cream);

    text-align:center;
}


/* =========================================================
   CHAPTER WRAPPER
   ========================================================= */

.phil-chapters .phil-wrap{

    width:min(
        740px,
        calc(100% - (var(--gutter) * 2))
    );

    max-width:740px;

    margin-inline:auto;

    padding:0;

    box-sizing:border-box;
}


/* =========================================================
   INDIVIDUAL CHAPTER
   ========================================================= */

.phil-chapter{

    width:100%;

    padding:
        clamp(52px,8vw,84px)
        0;

    border-bottom:
        1px solid rgba(11,31,51,0.12);

    text-align:center;

    box-sizing:border-box;
}


.phil-chapter:last-of-type{

    border-bottom:none;
}


/* =========================================================
   CHAPTER NUMBER
   ========================================================= */

.phil-chapter-num{

    display:block;

    margin-bottom:22px;

    font-size:0.76rem;

    letter-spacing:0.14em;

    text-transform:uppercase;

    color:var(--gold-dark);

    text-align:center;
}


/* =========================================================
   CHAPTER HEADING
   ========================================================= */

.phil-chapter h2{

    max-width:22ch;

    margin:
        0 auto
        clamp(24px,4vw,34px);

    font-size:
        clamp(1.4rem,2.9vw,1.9rem);

    line-height:1.32;

    text-align:center;
}


/* =========================================================
   CHAPTER BODY
   ========================================================= */

.phil-chapter-body{

    width:100%;

    max-width:680px;

    margin-inline:auto;

    text-align:center;
}


.phil-chapter-body p{

    max-width:62ch;

    margin:
        0 auto
        14px;

    font-size:1.02rem;

    line-height:1.85;

    color:var(--on-cream);

    text-align:center;
}


.phil-chapter-body p:last-child{

    margin-bottom:0;
}


/* =========================================================
   CHAPTER PIVOT
   ========================================================= */

.phil-pivot{

    width:min(
        620px,
        100%
    );

    max-width:620px;

    margin:
        clamp(28px,4vw,38px)
        auto
        0;

    padding-left:22px;

    border-left:
        1px solid var(--gold);

    text-align:center;

    box-sizing:border-box;
}


.phil-pivot p{

    max-width:44ch;

    margin:
        0 auto
        6px;

    font-family:'Playfair Display',serif;

    font-style:italic;

    font-weight:500;

    font-size:
        clamp(1.05rem,2vw,1.25rem);

    line-height:1.6;

    color:var(--navy);

    text-align:center;
}


.phil-pivot p:last-child{

    margin-bottom:0;
}


/* =========================================================
   CLOSING
   ========================================================= */

.phil-closing{

    padding:
        clamp(76px,11vw,140px)
        0
        0;

    text-align:center;
}


.phil-closing .phil-rule{

    width:44px;

    height:2px;

    background:var(--gold);

    margin:
        0 auto
        36px;
}


.phil-closing h2{

    max-width:20ch;

    margin:
        0 auto
        28px;

    font-size:
        clamp(1.7rem,3.8vw,2.5rem);

    line-height:1.3;

    text-align:center;
}


.phil-closing-body{

    display:flex;

    flex-direction:column;

    gap:14px;

    max-width:52ch;

    margin-inline:auto;

    text-align:center;
}


.phil-closing-body p{

    color:var(--on-navy-mute);

    font-size:1rem;

    line-height:1.75;

    text-align:center;
}


.phil-closing-pivot{

    max-width:46ch;

    margin:
        clamp(32px,5vw,44px)
        auto
        0;

    text-align:center;
}


.phil-closing-pivot p{

    font-family:'Playfair Display',serif;

    font-style:italic;

    font-weight:500;

    font-size:
        clamp(1.1rem,2.2vw,1.3rem);

    line-height:1.6;

    color:var(--on-navy);

    text-align:center;
}


/* =========================================================
   CTA STRIP
   ========================================================= */

.phil-cta-strip{

    margin-top:
        clamp(64px,9vw,96px);

    border-top:
        1px solid rgba(201,162,77,0.18);

    padding:
        clamp(56px,8vw,84px)
        0;

    text-align:center;
}


.phil-cta-strip h3{

    max-width:20ch;

    margin:
        0 auto
        16px;

    font-size:
        clamp(1.3rem,2.6vw,1.6rem);

    line-height:1.3;

    text-align:center;
}


.phil-cta-strip p{

    max-width:46ch;

    margin:
        0 auto
        32px;

    color:var(--on-navy-mute);

    font-size:0.98rem;

    line-height:1.7;

    text-align:center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:860px){

    .nav-links{
        display:none;
    }

    .nav-burger{
        display:flex;
    }

    .phil-p-hero-inner{
        width:min(
            680px,
            calc(100% - (var(--gutter) * 2))
        );

        max-width:680px;
    }

    .phil-chapters .phil-wrap{
        width:min(
            680px,
            calc(100% - (var(--gutter) * 2))
        );

        max-width:680px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:480px){

    .phil-p-hero-inner,
    .phil-chapters .phil-wrap{

        width:calc(
            100% - (var(--gutter) * 2)
        );

        padding-left:0;

        padding-right:0;
    }


    .phil-pivot{

        padding-left:16px;

        padding-right:8px;

    }


    .phil-chapter-body p{

        font-size:0.98rem;

        line-height:1.8;

    }


    .phil-chapter h2{

        max-width:19ch;

    }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .phil-btn,
    .phil-arrow{

        transition:none;

    }

}