:root {
    --paper: #fffbf0;
    --gold: #e0af00;
}

/* Tells the website to load your uploaded font file */
@font-face {
    font-family: "MyBrandFont"; 
    src: url("./YOUR-FONT-FILE-NAME.ttf"); /* <-- Ensure this matches your font file name exactly */
}

/* Base page setup */
body {
    background-color: var(--paper);
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
}

/* Container holding your content */
.artboard {
    font-family: "MyBrandFont", sans-serif;
    color: var(--gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    box-sizing: border-box;
    text-align: center;
    position: relative;
}

/* Brand block container (Logo + Tagline) at the top */
.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px; 
}

/* Logo sizing for Laptops/Desktops */
.brand-mark {
    width: 45vw;       
    max-width: 600px;  
    height: auto;      
    margin-bottom: 24px; 
}

/* Line 1: Tagline ("Crafting for the Dreams.") */
.tagline {
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    margin: 0;
}

/* Line 2: Main Headline ("In production.") - Absolute Dead Center */
h1 {
    font-size: 2.2rem; 
    font-weight: 300;
    font-style: italic;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

/* Email link pinned elegantly at the very bottom */
.email {
    font-size: 0.85rem; 
    text-decoration: none;
    color: var(--gold);
    letter-spacing: 0.15em;
    text-transform: lowercase;
    opacity: 0.8;
    position: absolute;
    bottom: 60px; 
}

/* 📱 MOBILE RESPONSIVE FIX (Applies only to screens smaller than 768px wide) */
@media (max-width: 768px) {
    body {
        overflow: auto; /* Allows scrolling on tiny screens if ever needed */
    }

    .brand {
        margin-top: 40px; /* Brings the logo up slightly closer to the top */
    }

    .brand-mark {
        width: 70vw; /* Scales the logo perfectly for a narrow phone screen */
    }

    h1 {
        font-size: 1.8rem; /* Makes "In production." slightly smaller so it doesn't collide */
        top: 55%; /* Lowers it a touch to clear room for the larger logo container */
    }

    .email {
        bottom: 40px; /* Elevates the email slightly from the absolute glass edge of phones */
    }
}