/* ==========================================
   SIGNATURE BRANDS - ABOUT PAGE
   Editorial / Luxury Streetwear
========================================== */

:root{
    --sb-bg:#f7f5f0;
    --sb-panel:#ffffff;

    --sb-text:#111111;
    --sb-muted:#666666;

    --sb-border:#dcd6ca;

    --sb-accent:#8f1d24;
    --sb-gold:#9a7b3d;

    --container:1200px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:var(--sb-bg);
    color:var(--sb-text);
    font-family:Arial, Helvetica, sans-serif;
    overflow-x:hidden;
}

.about-page{
    background:
        radial-gradient(
            circle at top left,
            rgba(143,29,36,.05),
            transparent 45rem
        ),
        radial-gradient(
            circle at bottom right,
            rgba(154,123,61,.04),
            transparent 35rem
        ),
        linear-gradient(
            180deg,
            #fbfaf7 0%,
            #f4f1ea 100%
        );
}

h2 {
    font-family: "Riotic Typeface";
}

.about-header{
    position:absolute;
    top:0;
    left:0;
    width:100%;

    z-index:100;

    padding:2rem;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.about-logo{
    color:#111;
    text-decoration:none;

    font-size:.85rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.about-nav{
    display:flex;
    gap:2rem;
}

.about-nav a{
    color:#111;
    text-decoration:none;

    font-size:.75rem;
    letter-spacing:.12em;
    text-transform:uppercase;

    position:relative;
}

.about-nav a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-6px;

    width:0;
    height:1px;

    background:#111;

    transition:.3s ease;
}

.about-nav a:hover::after,
.about-nav .active::after{
    width:100%;
}

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

.about-hero{
    position:relative;
    min-height:90vh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:
        clamp(6rem,10vw,10rem)
        1.5rem;

    overflow:hidden;

    border-bottom:1px solid var(--sb-border);
}

.about-hero::before{
    content:"SIGNATURE";

    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:clamp(6rem,18vw,18rem);
    font-weight:900;

    letter-spacing:-0.08em;

    color:rgba(0,0,0,.03);

    pointer-events:none;
    user-select:none;
}

.about-hero-inner{
    position:relative;
    z-index:2;

    width:min(100%, 1050px);

    text-align:center;
}

.about-kicker{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.75rem;

    margin-bottom:1.5rem;

    font-size:.75rem;
    letter-spacing:.18em;
    text-transform:uppercase;

    color:var(--sb-accent);

    font-family:"Courier New", monospace;
}

.about-kicker::before{
    content:"";
    width:40px;
    height:1px;
    background:var(--sb-accent);
}

.about-kicker.center{
    justify-content:center;
}

.about-hero h1{
    max-width:1000px;

    margin:0 auto;

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

    line-height:.88;
    letter-spacing:-.06em;
    text-transform:uppercase;
}

.about-lead{
    max-width:760px;

    margin:
        2rem auto 0;

    color:var(--sb-muted);

    font-size:1.15rem;
    line-height:1.8;
}

/* ==========================================
   MANIFESTO GRID
========================================== */

.about-manifesto{
    width:min(
        var(--container),
        calc(100% - 2rem)
    );

    margin:0 auto;

    padding:
        clamp(4rem,8vw,7rem)
        0;

    display:grid;

    grid-template-columns:
        1.3fr .9fr;

    gap:1rem;
}

.manifesto-card{
    position:relative;

    background:var(--sb-panel);

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

    padding:
        clamp(1.75rem,3vw,2.5rem);

    box-shadow:
        0 10px 40px rgba(0,0,0,.04);

    overflow:hidden;
}

.manifesto-card.large{
    min-height:580px;

    grid-row:span 2;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.card-number{
    position:absolute;

    top:1.25rem;
    right:1.25rem;

    color:#bbb;

    font-size:.75rem;

    font-family:
        "Courier New",
        monospace;
}

.manifesto-card h2{
    margin-bottom:1rem;

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

    line-height:.9;

    letter-spacing:-.05em;

    text-transform:uppercase;
}

.manifesto-card:not(.large) h2{
    font-size:
        clamp(
            1.8rem,
            3vw,
            3rem
        );
}

.manifesto-card p{
    color:var(--sb-muted);

    line-height:1.8;
}

.manifesto-card::after{
    content:"";

    position:absolute;

    width:240px;
    height:240px;

    right:-120px;
    bottom:-120px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(143,29,36,.08),
            transparent
        );
}

/* ==========================================
   SPLIT SECTION
========================================== */

.about-split{
    width:min(
        var(--container),
        calc(100% - 2rem)
    );

    margin:0 auto;

    padding-bottom:
        clamp(4rem,8vw,7rem);

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:1rem;
}

.about-image-panel{
    background-image: url('/about/images/placeholder1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 24px;
    overflow: hidden;
    border:1px solid var(--sb-border);
    overflow:hidden;
}

.about-image-panel::before{
    content:"SB";

    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:
        clamp(
            10rem,
            18vw,
            18rem
        );

    font-weight:900;

    color:rgba(0,0,0,.05);

    letter-spacing:-.1em;
}

.floating-label{
    position:absolute;

    left:1rem;
    bottom:1rem;

    background:#fff;

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

    padding:
        .8rem 1rem;

    font-size:.75rem;

    letter-spacing:.15em;

    text-transform:uppercase;

    font-family:
        "Courier New",
        monospace;
}

.about-copy-panel{
    background:#fff;

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

    padding:
        clamp(
            2rem,
            4vw,
            4rem
        );

    display:flex;
    flex-direction:column;
    justify-content:center;

    box-shadow:
        0 10px 40px rgba(0,0,0,.04);
}

.about-copy-panel h2{
    margin:
        .75rem 0 1.5rem;

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

    line-height:.9;

    letter-spacing:-.06em;

    text-transform:uppercase;
}

.about-copy-panel p{
    color:var(--sb-muted);

    line-height:1.9;

    margin-bottom:1rem;
}

/* ==========================================
   BUTTON
========================================== */

.about-button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:fit-content;

    margin-top:1rem;

    padding:
        1rem 1.4rem;

    background:#111;

    color:#fff;

    text-decoration:none;

    text-transform:uppercase;

    font-size:.75rem;

    letter-spacing:.15em;

    transition:.3s ease;
}

.about-button:hover{
    background:var(--sb-accent);

    transform:
        translateY(-3px);
}

/* ==========================================
   VALUES
========================================== */

.about-values{
    padding:
        clamp(4rem,8vw,7rem)
        1rem;

    border-top:1px solid var(--sb-border);
    border-bottom:1px solid var(--sb-border);
}

.values-grid{
    width:min(
        var(--container),
        100%
    );

    margin:
        2rem auto 0;

    display:grid;

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

    gap:1rem;
}

.values-grid div{
    background:#fff;

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

    padding:1.75rem;

    min-height:220px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.04);
}

.values-grid h3{
    margin-bottom:.75rem;

    font-size:1.35rem;

    text-transform:uppercase;
}

.values-grid p{
    color:var(--sb-muted);

    line-height:1.7;
}

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

.about-closing{
    width:min(
        1000px,
        calc(100% - 2rem)
    );

    margin:0 auto;

    padding:
        clamp(5rem,10vw,8rem)
        0;

    text-align:center;
}

.about-closing h2{
    font-size:
        clamp(
            3rem,
            7vw,
            6rem
        );

    line-height:.92;

    letter-spacing:-.06em;

    text-transform:uppercase;
}

.about-closing p{
    max-width:700px;

    margin:
        1.5rem auto 0;

    color:var(--sb-muted);

    line-height:1.8;

    font-size:1.1rem;
}

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

@media (max-width:950px){

    .about-manifesto{
        grid-template-columns:1fr;
    }

    .about-split{
        grid-template-columns:1fr;
    }

    .values-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .manifesto-card.large{
        min-height:420px;
    }

    .about-image-panel{
        min-height:420px;
    }
}

@media (max-width:650px){

    .values-grid{
        grid-template-columns:1fr;
    }

    .about-hero{
        min-height:75vh;
    }

    .about-copy-panel{
        padding:2rem;
    }
}