/* -----------------------------------------------------------
   DIALECT | STYLE.CSS
   v1.2 "The Manifesto"
   ----------------------------------------------------------- */

/* 1. TYPOGRAPHY & RESET */
@font-face {
    font-family: 'Numberplate';
    src: url('fonts/NumberplateLLWeb-Switzerland.woff2') format('woff2'),
         url('fonts/NumberplateLLWeb-Switzerland.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg-color: #caf5ee;       /* Variable by mood, market */
    --text-color: #050505;     /* Ink Black */
    --line-color: #050505;     /* Structural Borders */
    --font-stack: 'Numberplate', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-stack);
    margin: 0;
    padding: 0;
    line-height: 1.1; 
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* UTILITIES */
a { 
    color: var(--text-color); 
    text-decoration: none; 
    border-bottom: 2px solid var(--text-color); 
    transition: all 0.1s ease;
    line-height: 150%;
}
a:hover { 
    background-color: var(--text-color); 
    color: var(--bg-color); 
    border-bottom-color: var(--text-color);
}
.meta { font-size: 24px; letter-spacing: 0.05em; text-transform: uppercase; }


/* 2. THE CONTAINER */
.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 4px solid var(--line-color);
    border-bottom: 4px solid var(--line-color);
    margin: 20px;
    min-height: 95vh;
}

/* 3. MASTHEAD (Updated for Long Text) */
header {
    padding: 2rem;
    border-bottom: 2px solid var(--line-color);
    display: flex;
    align-items: flex-end; /* Aligns text to bottom of header area */
}

/* The new "We are Dialect..." statement */
header h1 {
    font-size: clamp(1.8rem, 4vw, 3.5rem); /* Scaled down from 6rem to fit the sentence */
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.05;
    max-width: 1150px;
    text-transform: uppercase;
}

/* 4. THE ENGINES (The Grid) */
.engines {
    display: grid;
    grid-template-columns: 1fr;
    background-color: var(--line-color); 
    gap: 2px; /* The Grid Lines */
    border-bottom: 2px solid var(--line-color);
}

.project-card {
    background-color: var(--bg-color);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px; /* Gives the text room to breathe */
    border: none; 
}

/* The Project Names (LIMN, SCOOP...) */
.project-title {
    font-size: 3.5rem; /* Big and heavy */
    margin: 0 0 1.5rem 0;
    letter-spacing: -0.03em;
    line-height: 0.9;
    text-transform: uppercase;
}

/* The Descriptions */
.project-card h2 {
    font-size: 2rem;
    font-weight: normal;
    font-family: var(--font-stack); /* Ensures consistency */
    margin: 0;
    line-height: 1.3;
    opacity: 1;
    max-width: 40ch;
    text-transform: none; /* Allows sentence case for the description */
}

/* 5. FOOTER */
footer {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 1.25rem;
}

.phone {
    font-size: 1.25rem;
    opacity: 0.7;
    margin-top: 1rem;
}

/* 6. DESKTOP MEDIA QUERIES */
@media (min-width: 900px) {
    .grid-container {
        margin: 40px;
        border-left: 4px solid var(--line-color);
        border-right: 4px solid var(--line-color);
    }

    .engines {
        grid-template-columns: 1fr 1fr; /* 2 Columns */
    }

    /* THE FIX: Place the span rule INSIDE the desktop query */
    #bind { 
        grid-column: 1 / -1; 
    }

    footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
    
    .phone { margin-top: 0; }
}