/* =============================================================
   SA HEDGE FUND — RESEARCH DETAIL
   =============================================================

   Research Detail intentionally mirrors the Insights Detail
   layout system while using the Research navy treatment.

   DIFFERENCE:
   - Insights Detail = cream page
   - Research Detail = navy page

   Geometry, spacing, widths and responsive behaviour are kept
   consistent with the Insights Detail system.

   ============================================================= */


/* =============================================================
   01. TOKENS / PAGE FOUNDATION
   ============================================================= */

.ra-page{
    background:var(--navy-deep);
    color:var(--on-navy);
    min-height:100vh;
}

.ra-wrap{
    max-width:var(--max);
    margin:0 auto;
    padding:0 var(--gutter);
}

::selection{
    background:var(--gold);
    color:var(--navy-deep);
}


/* =============================================================
   02. ACCESSIBILITY
   ============================================================= */

.ra-skip-link{
    position:absolute;
    left:-9999px;
    top:0;
    z-index:200;
    background:var(--gold);
    color:var(--navy-deep);
    padding:12px 20px;
    font-size:0.85rem;
    font-weight:600;
}

.ra-skip-link:focus{
    left:16px;
    top:16px;
}

.ra-page a:focus-visible,
.ra-page button:focus-visible,
.ra-page input:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
}


/* =============================================================
   03. READING PROGRESS
   ============================================================= */

.ra-progress-track{
    position:sticky;
    top:64px;
    z-index:59;
    height:2px;
    background:rgba(255,255,255,0.08);
}

.ra-progress-fill{
    height:2px;
    width:0%;
    background:var(--gold);
    transition:width .1s linear;
}


/* =============================================================
   04. RESEARCH HERO
   ============================================================= */

/*
   Same visual proportions as Insights Detail.

   Insights:
   padding: 28/40 top
   padding: 44/64 bottom

   Research:
   same geometry, navy surface.
*/

.ra-hero{
    background:var(--navy-deep);
    color:var(--on-navy);

    padding:
        clamp(28px,4vw,40px)
        0
        clamp(44px,6vw,64px);

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


/* Main desktop width matches Insights Detail */

.ra-hero .ra-wrap{
    width:min(1120px, calc(100% - 80px));
    max-width:1120px;
    margin-left:auto;
    margin-right:auto;
}


/* =============================================================
   05. RESEARCH BREADCRUMB
   ============================================================= */

.ra-breadcrumb{
    padding:22px 0 0;
}

.ra-breadcrumb .ra-wrap{
    width:min(1120px, calc(100% - 80px));
    max-width:1120px;
    margin-left:auto;
    margin-right:auto;
}

.ra-breadcrumb ol{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0;
    padding:0;

    font-size:0.78rem;
    color:var(--on-navy-mute);
}

.ra-breadcrumb li:not(:last-child)::after{
    content:'/';
    margin-left:8px;
    color:rgba(201,162,77,0.35);
}

.ra-breadcrumb a{
    color:var(--on-navy-mute);
}

.ra-breadcrumb a:hover{
    color:var(--gold);
}

.ra-breadcrumb li[aria-current]{
    color:var(--on-navy);
}


/* =============================================================
   06. HERO META / DISCIPLINE
   ============================================================= */

.ra-hero-tags{
    display:flex;
    gap:16px;
    align-items:center;
    flex-wrap:wrap;

    margin-bottom:22px;

    font-size:0.8rem;
    color:var(--on-navy-mute);
}

.ra-hero-tags .ra-category{
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:0.1em;
    font-size:0.74rem;
    font-weight:600;
}

.ra-hero-tags .ra-dot{
    color:rgba(201,162,77,0.35);
}


/* =============================================================
   07. HERO TITLE
   ============================================================= */

.ra-hero h1{
    font-size:clamp(2rem,4.4vw,3.05rem);
    line-height:1.22;

    max-width:35ch;

    letter-spacing:-0.01em;

    margin-bottom:24px;

    color:var(--on-navy);

    text-wrap:balance;
}


/* =============================================================
   08. HERO DEK / EXCERPT
   ============================================================= */

.ra-hero-dek{
    font-size:1.15rem;
    line-height:1.7;

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

    max-width:60ch;
}


/* =============================================================
   09. RESEARCH METADATA STRIP
   ============================================================= */

.ra-meta-strip{
    background:rgba(255,255,255,0.035);

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

    padding:
        clamp(28px,4vw,36px)
        0;
}

.ra-meta-strip .ra-wrap{
    width:min(1120px, calc(100% - 80px));
    max-width:1120px;
    margin-left:auto;
    margin-right:auto;
}

.ra-meta-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(130px,1fr));

    gap:24px;
}

.ra-meta-item .ra-meta-label{
    display:block;

    font-size:0.68rem;
    letter-spacing:0.1em;
    text-transform:uppercase;

    color:var(--gold);

    margin-bottom:8px;
}

.ra-meta-item .ra-meta-value{
    font-size:0.92rem;
    color:var(--on-navy);

    line-height:1.5;
}

.ra-meta-item .ra-meta-tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.ra-meta-item .ra-meta-tags span{
    font-size:0.76rem;

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

    border:1px solid rgba(201,162,77,0.22);

    padding:4px 10px;
}


/* =============================================================
   10. RESEARCH BODY SURFACE
   ============================================================= */

.ra-section{
    background:var(--cream);
    color:var(--on-cream);

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


/* =============================================================
   11. ARTICLE BODY LAYOUT
   ============================================================= */

.ra-layout{
    max-width:var(--max);
    margin:0 auto;

    padding:
        clamp(56px,8vw,88px)
        var(--gutter);

    display:grid;

    grid-template-columns:
        220px
        minmax(0,1fr);

    gap:clamp(40px,6vw,72px);

    align-items:start;
}


/* =============================================================
   12. TABLE OF CONTENTS
   ============================================================= */

.ra-toc{
    position:sticky;
    top:96px;
}

.ra-toc-label{
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;

    color:var(--gold-dark);

    margin-bottom:16px;

    display:block;
}

.ra-toc ol{
    list-style:none;

    margin:0;
    padding:0;

    display:flex;
    flex-direction:column;

    gap:12px;

    border-left:
        1px solid rgba(11,31,51,0.14);
}

.ra-toc a{
    display:block;

    padding:
        2px 0 2px 16px;

    font-size:0.86rem;
    color:var(--on-cream-mute);

    line-height:1.5;
}

.ra-toc a:hover{
    color:var(--on-cream);
}


/* =============================================================
   13. ARTICLE PROSE
   ============================================================= */

.ra-body{
    max-width:68ch;
}

.ra-body .ra-lede{
    font-family:'Playfair Display',serif;
    font-style:italic;

    font-size:1.25rem;
    line-height:1.6;

    color:var(--on-cream);

    margin-bottom:
        clamp(32px,5vw,44px);
}

.ra-body h2{
    font-size:1.5rem;
    line-height:1.35;

    color:var(--on-cream);

    margin:
        clamp(44px,6vw,60px)
        0
        20px;

    scroll-margin-top:96px;
}

.ra-body h3{
    font-size:1.2rem;
    line-height:1.4;

    color:var(--on-cream);

    margin:
        32px
        0
        14px;
}

.ra-body p{
    font-size:1.02rem;
    line-height:1.85;

    color:var(--on-cream);

    margin-bottom:22px;
}

.ra-body p.ra-mute{
    color:var(--on-cream-mute);
}

.ra-body ul,
.ra-body ol{
    margin:
        0
        0
        22px;

    padding-left:22px;
}

.ra-body li{
    font-size:1.02rem;
    line-height:1.8;

    color:var(--on-cream);

    margin-bottom:8px;
}


/* =============================================================
   14. PULL QUOTE
   ============================================================= */

.ra-body blockquote{
    margin:
        clamp(32px,5vw,44px)
        0;

    padding:
        6px
        0
        6px
        30px;

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

    font-family:'Playfair Display',serif;

    font-style:italic;

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

    line-height:1.55;

    color:var(--on-cream);
}


/* =============================================================
   15. FIGURES
   ============================================================= */

.ra-figure{
    margin:
        clamp(40px,6vw,56px)
        0;

    border:
        1px solid
        rgba(11,31,51,0.14);

    background:#fff;

    padding:
        clamp(24px,4vw,36px);
}

.ra-figure-compare{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:1px;

    background:
        rgba(11,31,51,0.14);

    border:
        1px solid
        rgba(11,31,51,0.14);
}

.ra-figure-col{
    background:#fff;
    padding:22px;
}

.ra-figure-col h4{
    font-size:0.78rem;

    letter-spacing:0.08em;

    text-transform:uppercase;

    color:var(--gold-dark);

    margin-bottom:10px;
}

.ra-figure-col p{
    font-size:0.92rem;

    line-height:1.6;

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

    margin:0;
}

.ra-figure-caption{
    margin-top:18px;

    font-size:0.82rem;

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

.ra-figure-caption b{
    color:var(--on-cream);

    font-weight:600;
}


/* =============================================================
   16. REFERENCES
   ============================================================= */

.ra-references{
    margin-top:
        clamp(40px,6vw,56px);

    padding-top:
        clamp(28px,4vw,36px);

    border-top:
        1px solid
        rgba(11,31,51,0.14);
}

.ra-references h2{
    font-size:1.1rem;

    margin-bottom:20px;
}

.ra-references ol{
    margin:0;

    padding-left:20px;
}

.ra-references li{
    font-size:0.9rem;

    line-height:1.7;

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

    margin-bottom:10px;
}


/* =============================================================
   17. RELATED RESEARCH
   ============================================================= */

.ra-related{
    background:var(--cream);

    padding:
        clamp(64px,9vw,100px)
        0;
}

.ra-related .ra-wrap{
    max-width:var(--max);
}

.ra-related-section-head{
    max-width:640px;

    margin:
        0
        0
        clamp(32px,4vw,44px);
}

.ra-related-section-head h2{
    font-size:
        clamp(1.4rem,2.6vw,1.8rem);
}

.ra-research-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:1px;

    background:
        rgba(11,31,51,0.1);

    border:
        1px solid
        rgba(11,31,51,0.1);
}

.ra-r-card{
    background:#fff;

    padding:
        clamp(26px,3.5vw,32px);

    display:flex;
    flex-direction:column;

    transition:
        background .25s ease;
}

.ra-r-card:hover{
    background:#fbfaf8;
}

.ra-r-card .ra-tag{
    font-size:0.72rem;

    letter-spacing:0.1em;

    text-transform:uppercase;

    color:var(--gold-dark);

    margin-bottom:14px;
}

.ra-r-card h3{
    font-size:1.08rem;

    line-height:1.4;

    margin-bottom:12px;
}

.ra-r-card p{
    font-size:0.9rem;

    line-height:1.65;

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

    flex:1;
}

.ra-r-card .ra-read{
    margin-top:18px;

    font-size:0.8rem;

    font-weight:500;

    display:inline-flex;

    gap:8px;

    align-items:center;

    color:var(--navy);

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

    padding-bottom:2px;

    width:fit-content;
}

.ra-r-card .ra-read:hover{
    color:var(--gold-dark);

    border-color:var(--gold);
}


/* =============================================================
   18. NEWSLETTER
   ============================================================= */

.ra-newsletter{
    background:var(--navy);

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

    text-align:center;

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

.ra-newsletter h2{
    font-size:
        clamp(1.4rem,2.8vw,1.9rem);

    max-width:26ch;

    margin:
        0
        auto
        14px;
}

.ra-newsletter p{
    color:var(--on-navy-mute);

    font-size:0.98rem;

    max-width:44ch;

    margin:
        0
        auto
        32px;
}

.ra-newsletter-form{
    display:flex;

    gap:12px;

    justify-content:center;

    flex-wrap:wrap;

    max-width:440px;

    margin:0 auto;
}

.ra-newsletter-form input{
    flex:1;

    min-width:200px;

    font-family:inherit;

    font-size:0.9rem;

    padding:0 16px;

    height:48px;

    border:
        1px solid
        rgba(201,162,77,0.3);

    background:transparent;

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

.ra-newsletter-form input::placeholder{
    color:var(--on-navy-mute);
}

.ra-newsletter-form input:focus{
    border-color:var(--gold);
}


/* =============================================================
   19. BUTTONS
   ============================================================= */

.ra-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;

    font-family:inherit;
}

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

    color:var(--navy-deep);

    font-weight:500;
}

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

.ra-btn-line{
    border-bottom:
        1px solid
        var(--gold-dim);

    padding:
        0
        0
        4px;

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

.ra-btn-line:hover{
    border-color:var(--gold);

    color:var(--gold);
}

.ra-btn-dark-primary{
    background:var(--navy);

    color:var(--cream);
}

.ra-btn-dark-primary:hover{
    background:var(--navy-deep);
}

.ra-btn-dark-line{
    border-bottom:
        1px solid
        rgba(11,31,51,0.3);

    color:var(--on-cream);
}

.ra-btn-dark-line:hover{
    border-color:var(--navy);

    color:var(--navy);
}

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

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


/* =============================================================
   20. EDITORIAL PRIMITIVES
   ============================================================= */

.ra-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:20px;
}

.ra-eyebrow::before{
    content:'';

    width:24px;

    height:1px;

    background:var(--gold);
}

.ra-eyebrow.ra-on-light{
    color:var(--gold-dark);
}

.ra-eyebrow.ra-on-light::before{
    background:var(--gold-dark);
}

.ra-meta-row{
    display:flex;

    flex-wrap:wrap;

    gap:8px 12px;

    font-size:0.82rem;

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

    align-items:center;
}

.ra-meta-row .ra-dot{
    opacity:0.45;
}


/* =============================================================
   21. SCROLL REVEAL
   ============================================================= */

.reveal{
    opacity:0;

    transform:translateY(14px);

    transition:
        opacity .6s ease,
        transform .6s ease;
}

.reveal.in{
    opacity:1;

    transform:none;
}

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

    .reveal{
        opacity:1;

        transform:none;

        transition:none;
    }

    html{
        scroll-behavior:auto;
    }
}


/* =============================================================
   22. DESKTOP — 981PX+
   ============================================================= */

@media (min-width:981px){

    .ra-page .ra-wrap{
        width:min(1120px, calc(100% - 80px));

        max-width:1120px;

        margin-left:auto;

        margin-right:auto;
    }


    /* Hero */

    .ra-page .ra-hero .ra-wrap{
        max-width:1120px;
    }


    .ra-page .ra-hero h1{
        max-width:35ch;

        text-wrap:balance;
    }


    .ra-page .ra-hero-dek{
        max-width:900px;
    }


    /* Metadata */

    .ra-page .ra-meta-strip .ra-wrap{
        max-width:1120px;
    }


    /* Article body */

    .ra-page .ra-layout{
        max-width:1120px;
    }


    .ra-page .ra-body{
        max-width:880px;
    }


    /* Related */

    .ra-page .ra-related .ra-wrap{
        max-width:1120px;
    }

}


/* =============================================================
   23. TABLET — 641PX TO 980PX
   ============================================================= */

@media (min-width:641px) and (max-width:980px){

    .ra-page .ra-wrap{
        width:min(calc(100% - 64px), 900px);

        max-width:900px;

        margin-left:auto;

        margin-right:auto;
    }


    /* Hero */

    .ra-page .ra-hero .ra-wrap{
        max-width:900px;
    }


    .ra-page .ra-hero h1{
        max-width:35ch;

        font-size:
            clamp(2.25rem,5vw,3rem);

        line-height:1.15;

        text-wrap:balance;
    }


    .ra-page .ra-hero-dek{
        max-width:760px;
    }


    /* Metadata */

    .ra-page .ra-meta-strip .ra-wrap{
        max-width:900px;
    }


    /* Article */

    .ra-page .ra-layout{
        grid-template-columns:1fr;

        max-width:900px;
    }


    .ra-page .ra-toc{
        position:static;

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

        padding-bottom:32px;

        margin-bottom:8px;
    }


    .ra-page .ra-toc ol{
        flex-direction:row;

        flex-wrap:wrap;

        border-left:none;

        gap:10px 20px;
    }


    .ra-page .ra-toc a{
        padding-left:0;

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


    .ra-page .ra-body{
        max-width:820px;
    }


    /* Related */

    .ra-research-grid{
        grid-template-columns:1fr;
    }

}


/* =============================================================
   24. MOBILE — MAX 640PX
   ============================================================= */

@media (max-width:640px){

    .ra-page .ra-wrap{
        width:calc(100% - 40px);

        max-width:none;

        margin-left:auto;

        margin-right:auto;
    }


    /* Breadcrumb */

    .ra-breadcrumb{
        padding-top:18px;
    }


    .ra-breadcrumb .ra-wrap{
        width:calc(100% - 40px);

        max-width:none;
    }


    .ra-breadcrumb ol{
        font-size:0.74rem;

        line-height:1.6;
    }


    /* Hero */

    .ra-page .ra-hero{
        padding:
            clamp(24px,6vw,32px)
            0
            clamp(40px,8vw,52px);
    }


    .ra-page .ra-hero .ra-wrap{
        max-width:none;
    }


    .ra-page .ra-hero h1{
        width:100%;

        max-width:30ch;

        font-size:
            clamp(2rem,7.5vw,2.45rem);

        line-height:1.12;

        letter-spacing:-0.015em;

        text-wrap:balance;
    }


    .ra-page .ra-hero-dek{
        width:100%;

        max-width:100%;

        font-size:1.05rem;

        line-height:1.65;
    }


    .ra-hero-tags{
        gap:10px 12px;

        margin-bottom:20px;

        font-size:0.76rem;
    }


    /* Metadata */

    .ra-page .ra-meta-strip .ra-wrap{
        max-width:none;
    }


    .ra-meta-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:24px 18px;
    }


    /* Article */

    .ra-layout{
        grid-template-columns:1fr;

        padding:
            48px
            20px
            64px;

        gap:36px;
    }


    .ra-toc{
        position:static;

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

        padding-bottom:28px;

        margin-bottom:0;
    }


    .ra-toc ol{
        flex-direction:row;

        flex-wrap:wrap;

        border-left:none;

        gap:10px 18px;
    }


    .ra-toc a{
        padding-left:0;

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


    .ra-body{
        max-width:none;
    }


    .ra-body p{
        font-size:1rem;

        line-height:1.8;
    }


    .ra-body li{
        font-size:1rem;

        line-height:1.75;
    }


    .ra-figure-compare{
        grid-template-columns:1fr;
    }


    .ra-research-grid{
        grid-template-columns:1fr;
    }

}


/* =============================================================
   25. SMALL PHONES — MAX 480PX
   ============================================================= */

@media (max-width:480px){

    .ra-page .ra-wrap{
        width:calc(100% - 32px);
    }


    .ra-breadcrumb .ra-wrap{
        width:calc(100% - 32px);
    }


    .ra-page .ra-hero h1{
        max-width:30ch;

        font-size:
            clamp(1.85rem,8vw,2.2rem);

        line-height:1.1;
    }


    .ra-page .ra-hero-dek{
        font-size:1rem;
    }


    .ra-meta-grid{
        grid-template-columns:1fr;

        gap:20px;
    }


    .ra-layout{
        padding-left:16px;
        padding-right:16px;
    }

}
/* =============================================================
   Component: ra-author
   Research detail author section
   ============================================================= */

.ra-author{
	background:var(--cream);
	border-top:1px solid rgba(11,31,51,0.1);
	border-bottom:1px solid rgba(11,31,51,0.1);
	padding:clamp(48px,7vw,72px) 0;
}

.ra-author .ra-wrap{
	display:flex;
	align-items:center;
	gap:28px;
}

.ra-author img{
	width:72px;
	height:72px;
	border-radius:0;
	display:block;
	object-fit:cover;
}

.ra-author h3{
	margin:0 0 8px;
	font-family:'Playfair Display',serif;
	font-size:1.25rem;
	line-height:1.3;
	font-weight:600;
	color:var(--on-cream);
}

.ra-author p{
	margin:0;
	max-width:60ch;
	font-size:0.95rem;
	line-height:1.7;
	color:var(--on-cream-mute);
}


/* ---------- Responsive ---------- */

@media (max-width:640px){

	.ra-author .ra-wrap{
		align-items:flex-start;
		gap:20px;
	}

	.ra-author img{
		width:56px;
		height:56px;
	}

	.ra-author h3{
		font-size:1.1rem;
	}

	.ra-author p{
		font-size:0.9rem;
	}

}