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

FEGOR STUDIO
Prelude Design System
Version 1.0

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



/*==========================================================
01
DESIGN TOKENS
==========================================================*/

:root{

    /* Colors */

    --color-bg:#090909;
    --color-surface:#111111;
    --color-surface-2:#151515;

    --color-text:#F5F5F0;
    --color-muted:#A5A5A5;

    --color-gold:#C6A43F;
    --color-gold-light:#D7B24E;

    --color-border:rgba(255,255,255,.08);

    /* Typography */

    --font-display:"Playfair Display",serif;
    --font-body:"Inter",sans-serif;

    /* Radius */

    --radius:12px;

    /* Width */

    --site-width:1600px;
    --content-width:720px;

    /* Transition */

    --transition:.35s ease;

}



/*==========================================================
02
RESET
==========================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    background:var(--color-bg);

    color:var(--color-text);

    font-family:var(--font-body);

    overflow-x:hidden;

    line-height:1.7;

    -webkit-font-smoothing:antialiased;

}



img{

    max-width:100%;

    display:block;

}



a{

    color:inherit;

    text-decoration:none;

}



button{

    font:inherit;

}



/*==========================================================
03
TYPOGRAPHY
==========================================================*/

h1,
h2,
h3{

    font-family:var(--font-display);

    font-weight:600;

    letter-spacing:-.03em;

}



h1{

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

    line-height:.95;

}



h2{

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

    line-height:1;

}



p{

    color:var(--color-muted);

    max-width:42rem;

    font-size:1.05rem;

}



.section-number{

    display:block;

    color:var(--color-gold);

    font-size:.8rem;

    letter-spacing:.35em;

    text-transform:uppercase;

    margin-bottom:2rem;

}



.section-label{

    display:block;

    margin-bottom:1rem;

    text-transform:uppercase;

    letter-spacing:.25em;

    font-size:.8rem;

    color:var(--color-muted);

}



.eyebrow{

    display:inline-block;

    margin-bottom:2rem;

    color:var(--color-gold);

    text-transform:uppercase;

    letter-spacing:.28em;

    font-size:.78rem;

}



/*==========================================================
04
LAYOUT
==========================================================*/

main{

    position:relative;

    z-index:2;

}



section{

    position:relative;

}



.hero,
.statement,
.editorial-band,
.philosophy,
.closing-statement{

    width:100%;

}



.editorial-grid{

    width:min(92%,var(--site-width));

    margin-inline:auto;

    display:grid;

    grid-template-columns:5fr 7fr;

    gap:7rem;

    align-items:center;

    padding:10rem 0;

}



.editorial-grid.reverse{

    grid-template-columns:7fr 5fr;

}



.statement-inner,
.editorial-band-inner,
.philosophy-inner,
.closing-inner{

    width:min(92%,1100px);

    margin-inline:auto;

    padding:10rem 0;

}

.statement,
.editorial-band,
.philosophy,
.follow,
.closing-statement,
.site-footer{
    position:relative;
}


/*==========================================================
05
AMBIENT BACKGROUND
==========================================================*/

body::before{

    content:"";

    position:fixed;

    inset:-25%;

    pointer-events:none;

    background:

    radial-gradient(circle at 20% 30%,
    rgba(198,164,63,.08),
    transparent 35%),

    radial-gradient(circle at 80% 70%,
    rgba(255,255,255,.03),
    transparent 45%);

    animation:ambientMove 40s linear infinite;

    z-index:0;

}



@keyframes ambientMove{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-3%,2%);

    }

    100%{

        transform:translate(0,0);

    }

}



/*==========================================================
06
FILM GRAIN
==========================================================*/

.film-grain{

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.04;

    z-index:1;

    background-image:url("https://grainy-gradients.vercel.app/noise.svg");

}
/*==========================================================
07
LOADER
==========================================================*/

#loader{

    position:fixed;

    inset:0;

    background:#090909;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    transition:opacity .9s ease,
               visibility .9s ease;

}

#loader.hidden{

    opacity:0;

    visibility:hidden;

}

.loader-inner{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:1.5rem;

}

.loader-top,
.loader-bottom{

    font-family:var(--font-display);

    font-size:clamp(2rem,4vw,3rem);

    letter-spacing:.35em;

}

.loader-divider{

    width:90px;

    height:1px;

    background:var(--color-gold);

}



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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:8rem 6vw;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at center,
    rgba(198,164,63,.08),
    transparent 55%);

    pointer-events:none;

}

.hero-content{

    position:relative;

    z-index:2;

    width:min(760px,92vw);

}

.hero-logo{

    margin-bottom:5rem;

}

.logo-placeholder{

    font-family:var(--font-display);

    font-size:clamp(3rem,8vw,6rem);

    letter-spacing:.18em;

    color:var(--color-text);

}

.hero h1{

    margin-bottom:2rem;

    max-width:9ch;

}

.hero-description{

    margin-bottom:4rem;

    max-width:34rem;

    font-size:1.05rem;

}
.hero-grid{

    width:min(92%,1500px);

    margin-inline:auto;

    display:grid;

    grid-template-columns:5fr 6fr;

    align-items:center;

    gap:8rem;

}

.hero-visual{

    display:flex;

    justify-content:flex-end;

}

.hero-frame{

    position:relative;

    width:min(650px,100%);

    aspect-ratio:4/5;

    border-radius:16px;

    overflow:hidden;

    border:1px solid var(--color-border);

    background:#111;

}

.hero-image-placeholder{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-family:var(--font-display);

    font-size:2rem;

    letter-spacing:.3em;

    color:rgba(255,255,255,.18);

    background:

    radial-gradient(circle at top,

    rgba(198,164,63,.14),

    transparent 60%),

    linear-gradient(

    180deg,

    rgba(255,255,255,.03),

    rgba(255,255,255,.01)

    );

}
    .hero-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.editorial-image{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .8s ease;

}

.editorial-image:hover{

    transform:scale(1.03);

}

.editorial-photo{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .8s ease,
        filter .6s ease;

}

.editorial-image{

    overflow:hidden;

    border-radius:16px;

}

.editorial-image:hover .editorial-photo{

    transform:scale(1.03);

}

.hero-frame::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at center,

    rgba(255,255,255,.08),

    transparent 55%);

    animation:lightFloat 12s ease-in-out infinite;

}

@keyframes lightFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

@media (max-width:1100px){

    .hero-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .hero-visual{

        justify-content:center;

    }

}



/*==========================================================
09
BUTTONS
==========================================================*/

.hero-actions,
.action-stack{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

}

.action-stack{

    flex-direction:column;

    align-items:flex-start;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:1rem 2rem;

    border:1px solid var(--color-border);

    border-radius:var(--radius);

    transition:all .35s ease;

    min-width:210px;

    background:transparent;

    color:var(--color-text);

    

}

.btn:hover{

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

    color:var(--color-gold);

    transform:translateY(-2px);

    background:rgba(255,255,255,.02);

}

.text-link{

    display:inline-block;

    margin-top:3rem;

    color:var(--color-gold);

    letter-spacing:.12em;

    text-transform:uppercase;

    font-size:.8rem;

}

.text-link:hover{

    color:var(--color-gold-light);

}



/*==========================================================
10
EDITORIAL SECTIONS
==========================================================*/

.editorial-copy{

    max-width:560px;

}

.editorial-copy h2{

    margin-bottom:2rem;

}

.editorial-copy p{

    margin-top:2rem;

}



/*==========================================================
11
IMAGE FRAMES
==========================================================*/

.editorial-image{

    position:relative;

}

.image-placeholder{

    aspect-ratio:4/5;

    width:100%;

    border:1px solid var(--color-border);

    border-radius:var(--radius);

    display:flex;

    justify-content:center;

    align-items:center;

    font-family:var(--font-display);

    letter-spacing:.25em;

    color:rgba(255,255,255,.25);

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.01)
    );

    overflow:hidden;

}

.image-placeholder::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top,
    rgba(198,164,63,.06),
    transparent 60%);

    pointer-events:none;

}



/*==========================================================
12
FULL WIDTH SECTIONS
==========================================================*/

.statement{

    border-top:1px solid var(--color-border);

    border-bottom:1px solid var(--color-border);

}

.statement h2{

    margin-bottom:2rem;

}

.editorial-band{

    background:#101010;

}

.editorial-band p{

    font-family:var(--font-display);

    font-size:clamp(2rem,4vw,3.5rem);

    line-height:1.2;

    color:var(--color-text);

    max-width:16ch;

}

.philosophy{

    text-align:center;

}

.philosophy blockquote{

    font-family:var(--font-display);

    font-size:clamp(2rem,5vw,4rem);

    max-width:16ch;

    margin-inline:auto;

    line-height:1.3;

    font-style:italic;

    color:var(--color-text);

}

.closing-statement{

    text-align:center;

}

.closing-small{

    text-transform:uppercase;

    letter-spacing:.25em;

    margin-bottom:2rem;

    color:var(--color-gold);

}
/*==========================================================
13
FOLLOW SECTION
==========================================================*/

.follow{

    padding:clamp(8rem,12vw,14rem) 0;

}

.follow-inner{

    width:min(92%,1200px);

    margin-inline:auto;

}

.social-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:1.25rem;

    margin-top:4rem;

}

.social-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:.35rem;

    min-height:140px;

    padding:2rem;

    border:1px solid var(--color-border);

    border-radius:var(--radius);

    background:rgba(255,255,255,.015);

    transition:
        border-color .35s ease,
        background .35s ease,
        transform .35s ease;

}

.social-card span{

    font-family:var(--font-display);

    font-size:1.35rem;

    color:var(--color-text);

}

.social-card small{

    color:var(--color-muted);

    letter-spacing:.08em;

}

.social-card:hover{

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

    background:rgba(255,255,255,.03);

    transform:translateY(-4px);

}

/*==========================================================
14
FOOTER
==========================================================*/

.site-footer{

    border-top:1px solid var(--color-border);

    padding:7rem 0 4rem;

}

.footer-inner{

    width:min(92%,1400px);

    margin-inline:auto;

}

.footer-logo{

    font-family:var(--font-display);

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

    letter-spacing:.12em;

    margin-bottom:1rem;

}

.footer-divider{

    width:80px;

    height:1px;

    margin:3rem 0;

    background:var(--color-gold);

}

.footer-meta{

    display:flex;

    flex-wrap:wrap;

    gap:2rem;

    list-style:none;

    margin-bottom:3rem;

}

.footer-meta a{

    transition:color .3s ease;

}

.footer-meta a:hover{

    color:var(--color-gold);

}

.site-footer small{

    color:var(--color-muted);

    line-height:1.8;

}

/*==========================================================
15
SCROLL REVEAL
==========================================================*/

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.reveal.active{

    opacity:1;

    transform:none;

}

/*==========================================================
16
ACCESSIBILITY
==========================================================*/

a:focus-visible,
button:focus-visible{

    outline:2px solid var(--color-gold);

    outline-offset:4px;

}

/*==========================================================
17
REDUCED MOTION
==========================================================*/

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

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

@media (max-width:1100px){

    .editorial-grid,
    .editorial-grid.reverse{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .hero{

        padding:6rem 7vw;

    }

}

@media (max-width:768px){

    .hero{

        min-height:auto;

        padding:7rem 1.5rem 5rem;

    }

    .statement-inner,
    .editorial-band-inner,
    .philosophy-inner,
    .closing-inner{

        padding:6rem 0;

    }

    .editorial-grid{

        padding:6rem 0;

    }

    .hero-actions{

        flex-direction:column;

    }

    .btn{

        width:100%;

    }

    .social-grid{

        grid-template-columns:1fr;

    }

    .footer-meta{

        flex-direction:column;

        gap:1rem;

    }

}
/*==========================================================
19
BUTTON POLISH
==========================================================*/

.btn{

    position:relative;

    overflow:hidden;

    font-size:.9rem;

    font-weight:500;

    letter-spacing:.14em;

    text-transform:uppercase;

    cursor:pointer;

}

.btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(198,164,63,.06);

    opacity:0;

    transition:opacity .35s ease;

}

.btn:hover::before{

    opacity:1;

}

.btn-primary{

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

}

.btn-secondary{

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

}

.btn-primary:hover{

    background:rgba(198,164,63,.08);

}

.btn-secondary:hover{

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

}



/*==========================================================
20
HERO POLISH
==========================================================*/

.hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.hero-description{

    color:var(--color-muted);

    max-width:34rem;

}

.hero h1{

    margin-bottom:2rem;

    max-width:8ch;

}

.hero-logo{

    margin-bottom:4rem;

}

.logo-placeholder{

    opacity:.92;

    transition:opacity .35s ease;

}

.logo-placeholder:hover{

    opacity:1;

}



/*==========================================================
21
EDITORIAL POLISH
==========================================================*/

.statement h2,
.editorial-copy h2,
.follow h2,
.closing-inner h2{

    max-width:10ch;

}

.statement p{

    margin-top:2rem;

}

.editorial-copy{

    display:flex;

    flex-direction:column;

}

.editorial-copy p{

    max-width:32rem;

}

.editorial-copy .text-link{

    width:max-content;

}



/*==========================================================
22
IMAGE TREATMENT
==========================================================*/

.hero-frame,
.image-placeholder{

    transition:

        transform .6s ease,

        border-color .35s ease;

}

.hero-frame:hover{

    transform:translateY(-6px);

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

}

.editorial-image:hover .image-placeholder{

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

    transform:translateY(-6px);

}



/*==========================================================
23
DIVIDERS
==========================================================*/

.statement::after,
.editorial-band::after,
.philosophy::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:80px;

    height:1px;

    transform:translateX(-50%);

    background:rgba(198,164,63,.35);

}



/*==========================================================
24
SELECTION
==========================================================*/

::selection{

    background:rgba(198,164,63,.25);

    color:#fff;

}

::-moz-selection{

    background:rgba(198,164,63,.25);

    color:#fff;

}



/*==========================================================
25
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#090909;

}

::-webkit-scrollbar-thumb{

    background:#2a2a2a;

    border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--color-gold);

}
/*==========================================================
26
SECTION SPACING
==========================================================*/

.statement,
.editorial-band,
.philosophy,
.follow,
.closing-statement{

    padding-inline:clamp(1.5rem,3vw,4rem);

}

.statement-inner,
.editorial-band-inner,
.philosophy-inner,
.closing-inner{

    display:flex;

    flex-direction:column;

    justify-content:center;

}



/*==========================================================
27
CONTENT WIDTHS
==========================================================*/

.statement h2,
.philosophy blockquote,
.closing-inner h2{

    max-width:12ch;

}

.statement p{

    max-width:40rem;

}

.follow p{

    max-width:34rem;

}



/*==========================================================
28
SOCIAL GRID POLISH
==========================================================*/

.social-grid{

    margin-top:5rem;

}

.social-card{

    min-height:170px;

    justify-content:flex-end;

}

.social-card span{

    margin-bottom:.4rem;

}

.social-card:hover{

    transform:translateY(-6px);

}



/*==========================================================
29
FOOTER POLISH
==========================================================*/

.site-footer{

    background:#080808;

}

.footer-inner{

    display:flex;

    flex-direction:column;

}

.footer-logo{

    margin-bottom:1.5rem;

}

.footer-inner p{

    margin-bottom:2rem;

}

.footer-meta{

    padding:0;

}

.footer-meta li{

    color:var(--color-muted);

}



/*==========================================================
30
UTILITY CLASSES
==========================================================*/

.text-gold{

    color:var(--color-gold);

}

.text-muted{

    color:var(--color-muted);

}

.center{

    text-align:center;

}

.hidden{

    display:none !important;

}



/*==========================================================
31
RESPONSIVE POLISH
==========================================================*/

@media (max-width:900px){

    h1{

        max-width:10ch;

    }

    h2{

        max-width:12ch;

    }

    .hero-grid{

        gap:3rem;

    }

    .hero-logo{

        margin-bottom:3rem;

    }

}

@media (max-width:600px){

    body{

        font-size:15px;

    }

    .hero{

        padding-top:6rem;

    }

    .hero-actions{

        width:100%;

    }

    .btn{

        width:100%;

        min-width:unset;

    }

    .social-card{

        min-height:140px;

        padding:1.5rem;

    }

    .footer-inner{

        gap:1rem;

    }

    .footer-meta{

        margin-top:1rem;

    }

}
/*==========================================================
32
SITE FADE
==========================================================*/

.site-hidden{

    opacity:0;

    transform:translateY(24px);

    pointer-events:none;

}

.site-visible{

    opacity:1;

    transform:none;

    transition:
        opacity 1s ease,
        transform 1s ease;

}

/*==========================================================
33
LOADER ANIMATION
==========================================================*/

.loader-top{

    animation:loaderFadeTop .8s ease forwards;

}

.loader-divider{

    animation:loaderDivider .8s ease forwards;

}

.loader-bottom{

    animation:loaderFadeBottom .8s ease forwards;

}

@keyframes loaderFadeTop{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes loaderFadeBottom{

    from{

        opacity:0;

        transform:translateY(-12px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes loaderDivider{

    from{

        width:0;

        opacity:0;

    }

    to{

        width:90px;

        opacity:1;

    }

}
/*==========================================================
34
STORY MOMENT
==========================================================*/

.story-moment{

    width:100%;

    padding:
        clamp(7rem,12vw,13rem)
        clamp(1.5rem,4vw,5rem);

    border-top:1px solid var(--color-border);

}

.story-moment-grid{

    width:min(1400px,100%);

    margin-inline:auto;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:clamp(4rem,9vw,10rem);

}

.story-moment-image{

    position:relative;

    overflow:hidden;

    border:1px solid var(--color-border);

    border-radius:16px;

    aspect-ratio:4 / 5;

}

.story-moment-photo{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform 1s ease,
        filter .8s ease;

}

.story-moment-image:hover .story-moment-photo{

    transform:scale(1.025);

}

.story-moment-copy{

    max-width:520px;

}

.story-moment-copy h2{

    max-width:9ch;

    margin-bottom:2.5rem;

}

.story-moment-copy p + p{

    margin-top:1.5rem;

}



/*==========================================================
35
STORY MOMENT RESPONSIVE
==========================================================*/

@media (max-width:900px){

    .story-moment-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .story-moment-copy{

        max-width:600px;

    }

}

@media (max-width:600px){

    .story-moment{

        padding-inline:1.5rem;

    }

    .story-moment-grid{

        gap:3rem;

    }

}

/*==========================================================
36
FEGOR BRAND MARK
==========================================================*/

.brand-mark{

    display:inline-flex;

    align-items:center;

    width:max-content;

    text-decoration:none;

}

.brand-logo{

    display:block;

    width:clamp(150px,18vw,230px);

    height:auto;

    object-fit:contain;

    transition:opacity .35s ease;

}

.brand-mark:hover .brand-logo{

    opacity:.82;

}

@media (max-width:600px){

    .brand-logo{

        width:170px;

    }

}

/* ==========================================================
   FEGOR STUDIO — HERO RESPONSIVE FINAL
   Hero section only. Do not alter other sections.
   ========================================================== */

.hero-grid{
    width:min(92%,1500px);
    min-width:0;
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    gap:clamp(3rem,6vw,8rem);
}

.hero-content{
    width:100%;
    max-width:760px;
    min-width:0;
}

.hero-visual{
    width:100%;
    min-width:0;
    justify-content:flex-end;
}

.hero-frame{
    width:100%;
    max-width:650px;
    min-width:0;
}

@media (max-width:1100px){

    .hero-grid{
        width:min(92%,900px);
        grid-template-columns:1fr;
        gap:4.5rem;
    }

    .hero-content{
        width:100%;
        max-width:760px;
        margin-inline:auto;
    }

    .hero-visual{
        width:100%;
        justify-content:center;
    }

    .hero-frame{
        width:100%;
        max-width:620px;
    }

}

@media (max-width:600px){

    .hero{
        padding-inline:1.5rem;
    }

    .hero-grid{
        width:100%;
        max-width:none;
        grid-template-columns:1fr;
        gap:3.5rem;
    }

    .hero-content{
        width:100%;
        max-width:none;
    }

    .hero-visual{
        width:100%;
        min-width:0;
    }

    .hero-frame{
        width:100%;
        max-width:none;
        aspect-ratio:4 / 5;
    }

}