/* Core Variables & Global Setup */
:root { 
    --paper: #fdfcfb; 
    --ink: #1a1a1a; 
    --gray: #666; 
}

body { 
    background-color: var(--paper); 
    color: var(--ink); 
    font-family: 'Inter', sans-serif; 
    font-weight: 300; /* This is the secret for that high-end thin look */
    margin: 0; 
    line-height: 1.6; 
}

/* Header & Home Page Layout */
header.main-header { 
    padding: 120px 10% 60px 10%; 
    border-bottom: 1px solid #eee; 
}

h1 { 
    font-family: 'Source Serif 4', serif; 
    font-size: 3.5rem; 
    font-weight: 300; 
    margin: 0; 
    letter-spacing: -1px; 
}

.tagline { 
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem; 
    color: var(--gray); 
    max-width: 600px; 
    margin-top: 20px; 
    font-weight: 300; 
}

/* The Grid - This replicates the 4-column row exactly */
.grid-container { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    padding: 0; 
}

.sector { 
    padding: 60px 10%; 
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee; /* Adds the vertical dividers */
    transition: background 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.sector:last-child { border-right: none; }
.sector:hover { background-color: #f7f3f0; }

.sector h2 { 
    font-family: 'Source Serif 4', serif; 
    font-size: 2rem; 
    font-weight: 400; 
    margin: 0 0 15px 0; 
}

.sector p { 
    font-family: 'Inter', sans-serif;
    font-weight: 300; /* This makes it look airy and professional */
    font-size: 1rem; 
    color: var(--gray); 
    max-width: 400px; /* Forces the text to wrap like in your screenshot */
    margin-top: 10px;
    line-height: 1.5;
}

.label { 
    font-size: 0.7rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    color: #999; 
    margin-bottom: 10px; 
    display: block; 
}

/* Blog Page Styling (und.html) */
.blog-page {
    padding: 60px 10%; /* Matches the header padding for consistency */
    max-width: 900px; /* Limits reading width */
    margin: 0 auto;
}

.blog-page nav { margin-bottom: 40px; }
.blog-page h2 { font-size: 2.5rem; }
.post-meta { font-size: 0.8rem; color: #999; letter-spacing: 1px; margin-bottom: 20px; }
.post-body { font-size: 1.15rem; color: #333; }
blockquote { border-left: 3px solid var(--ink); padding-left: 20px; font-style: italic; margin: 30px 0; }

/* Responsive: stack on mobile */
@media (max-width: 1000px) {
    .grid-container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .grid-container { grid-template-columns: 1fr; }
    h1 { font-size: 2.5rem; }
}

/* NEW SESSION FOR und.html */

/* Blog Page Specifics */
.blog-page {
    /* No margin: 0 auto; here - we use the 10% padding to match the index header */
}

.blog-nav {
    padding: 40px 10% 0 10%; /* Matches the left alignment of the index header */
}

.blog-header {
    padding: 60px 10% 60px 10%;
    border-bottom: 1px solid #eee;
    margin-bottom: 60px;
}

.blog-content {
    padding: 0 10% 120px 10%;
}

/* Ensure blog body text is the same high-end weight */
.post-body p {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 1.1rem;
    color: var(--ink);
    max-width: 650px; /* Slightly wider than the index for long-form reading */
    line-height: 1.7;
    margin-bottom: 25px;
}

/* Match the blog H2 to the index H2 style */
.post h2 {
    font-family: 'Source Serif 4', serif;
    font-size: 2.5rem; /* Larger for the main article title */
    font-weight: 400;
    margin-bottom: 20px;
}

/* Improvements for mobile view */

/* Mobile Optimization */
@media (max-width: 768px) {
    /* Reduce header padding so it doesn't take up the whole screen */
    header.main-header {
        padding: 80px 10% 40px 10%;
    }

    h1 {
        font-size: 2.5rem; /* Slightly smaller title for mobile */
    }

    /* Stack the 4 columns into 1 single column */
    .grid-container {
        grid-template-columns: 1fr; 
    }

    .sector {
        padding: 40px 10%; /* Adjust padding for better thumb-scrolling */
        border-right: none; /* Remove vertical dividers since they are now stacked */
        border-bottom: 1px solid #eee;
    }

    /* Blog Page Adjustments */
    .blog-header {
        padding: 40px 10%;
    }

    .post h2 {
        font-size: 1.8rem; /* Scale down blog titles */
    }

    .post-body p {
        font-size: 1.05rem; /* Slightly smaller text for better density */
    }
}