:root{

    --bg:#050505;
    --surface:#090909;
    --text:#F2F2EE;
    --muted:#9A9A9A;
    --line:rgba(255,255,255,.08);

}

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

html{
    scroll-behavior:smooth;
}

body{

    background:var(--bg);
    color:var(--text);

    font-family:"Inter",sans-serif;

    overflow-x:hidden;

}

::selection{

    background:white;
    color:black;

}

main{

    width:min(1200px,92%);
    margin:auto;

}

/* ---------------- HERO ---------------- */

.hero{

    min-height:100vh;

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

    text-align:center;

}

.hero-content{

    max-width:760px;

}

.hero-logo{

    display:flex;
    justify-content:center;
    margin-bottom:70px;

}

.hero h2{

    font-family:"Cormorant Garamond",serif;

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

    font-weight:500;

    letter-spacing:.04em;

    margin-bottom:30px;

}

.hero p{

    color:var(--muted);

    font-size:1.1rem;

    line-height:2;

    max-width:620px;

    margin:auto;

}

/* ---------------- MANIFESTO ---------------- */

.manifesto{

    padding:220px 0;

}

.small{

    color:var(--muted);

    letter-spacing:.35em;

    font-size:.75rem;

    margin-bottom:45px;

}

.manifesto h3{

    font-family:"Cormorant Garamond",serif;

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

    line-height:1.15;

    font-weight:500;

    max-width:900px;

}

.body{

    margin-top:70px;

    max-width:650px;

    color:var(--muted);

    font-size:1.1rem;

    line-height:2;

}

/* ---------------- ARCHIVE ---------------- */

.archive{

    padding:220px 0;

}

.file{

    padding:42px 0;

    cursor:pointer;

    transition:.35s ease;

}

.file span{

    display:block;

    color:var(--muted);

    font-size:.75rem;

    letter-spacing:.35em;

    margin-bottom:18px;

}

.file h4{

    font-family:"Cormorant Garamond",serif;

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

    font-weight:500;

    transition:.35s;

}

.file:hover{

    padding-left:18px;

}

.file:hover h4{

    letter-spacing:.02em;

}

.divider{

    height:1px;

    background:var(--line);

}

/* ---------------- FOOTER ---------------- */

footer{

    padding:160px 0 80px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:25px;

    color:var(--muted);

    font-size:.9rem;

}

/* ---------------- LOGO ---------------- */

.logo-mark{

    width:82px;

    display:block;

    margin:auto;

    opacity:.95;

    transition:.45s ease;

}

.logo-mark:hover{

    transform:scale(1.03);

}

.logo-intro{

    width:48px;

    display:block;

    margin:auto;

}

/* ---------------- INTRO ---------------- */

#intro{

    position:fixed;

    inset:0;

    background:#050505;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    animation:introFade 3s forwards;

}

#intro .logo{

    text-align:center;

}

#intro h1{

    margin-top:40px;

    font-family:"Cormorant Garamond",serif;

    font-weight:500;

    letter-spacing:.45em;

    font-size:1rem;

}

/* ---------------- GRAIN ---------------- */

.grain{

    position:fixed;

    inset:-200%;

    pointer-events:none;

    opacity:.05;

    background-image:url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

    animation:grain 8s steps(10) infinite;

}

/* ---------------- RESPONSIVE ---------------- */

@media(max-width:768px){

.hero{

    min-height:90vh;

}

.hero h2{

    font-size:3rem;

}

.manifesto,
.archive{

    padding:120px 0;

}

footer{

    flex-direction:column;
    align-items:flex-start;

}

.glyph.large{

    transform:scale(1.2);

}

.left,
.right,
.gap{

    height:90px;

}

}

/* ===========================
   FEATURED
=========================== */

.featured{

    padding:220px 0;

}

.featured-card{

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

    padding:70px;

    transition:.4s ease;

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

}

.featured-card:hover{

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

    transform:translateY(-4px);

}

.featured-card span{

    display:block;

    color:var(--muted);

    letter-spacing:.3em;

    font-size:.75rem;

    margin-bottom:20px;

}

.featured-card h2{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(2.8rem,5vw,4.8rem);

    font-weight:500;

    margin-bottom:30px;

}

.featured-card p{

    max-width:600px;

    color:var(--muted);

    line-height:2;

    margin-bottom:50px;

}

.enter-link{

    text-decoration:none;

    color:var(--text);

    letter-spacing:.15em;

    font-size:.8rem;

    transition:.35s ease;

}

.enter-link:hover{

    letter-spacing:.25em;

}

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

.site-footer{

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

    padding:80px 0;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

}

.footer-brand h3{

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

    font-weight:500;

    letter-spacing:.25em;

    margin-bottom:15px;

}

.footer-brand p{

    color:var(--muted);

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-links a,
.footer-contact a{

    color:var(--muted);

    text-decoration:none;

    transition:.3s ease;

}

.footer-links a:hover,
.footer-contact a:hover{

    color:white;

    padding-left:8px;

}

@media(max-width:900px){

    .featured-card{

        padding:40px 28px;

    }

    .site-footer{

        grid-template-columns:1fr;

        gap:40px;

    }

}