/* ==========================================================================
   1. Typography & Variables
   ========================================================================== */
/* Imports the primary serif typeface and the vintage Doto monospace */
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@400;700&family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    /* Main Structural Canvas */
    --bg-forest: #0F1E16;      /* Base background color */
    --line-color: #1B3527;     /* Used for structural grid lines and borders */
    
    /* Core Typography & Identity */
    --cream: #F2EBE1;          /* Primary body text color */
    --gold: #D4A35B;           /* Accent color for active states, headers, and metadata */
    
    /* Action & Intent Accents */
    --vermilion: #D24A36;      /* High-contrast color for hover states and interactive elements */
}

/* Global Reset: Strips default browser spacing to ensure strict alignment */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding/borders don't expand calculated element widths */
}

body {
    font-family: 'EB Garamond', serif;
    background-color: var(--bg-forest); 
    color: var(--cream);                
    line-height: 1.6; /* Increases vertical breathing room for body text */
    overflow-x: hidden; /* Prevents horizontal scrolling issues on mobile viewports */
}

html {
    overflow-y: scroll; /* Forces the scrollbar track to always exist */
    background-color: var(--bg-forest); /* Prevents white flashes during routing */
}

/* Isolate the animation to the content, anchoring the nav bar */
.page-content {
    animation: phosphor-enter 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes phosphor-enter {
    0% {
        opacity: 0;
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
    }
}

/* The Power-Down Exit State */
.page-content.phosphor-exit {
    opacity: 0 !important;
    filter: blur(3px) !important;
    transition: opacity 0.15s ease-out, filter 0.15s ease-out; /* Tightened to 150ms */
}

/* ==========================================================================
   2. Top Bar Navigation & Logo
   ========================================================================== */
.top-bar {
    /* Locks the header to the top of the viewport at all times */
    position: fixed;
    inset: 0 0 auto 0; /* Shorthand: Top 0, Right 0, Bottom Auto, Left 0 */
    width: 100%;
    height: 90px; 
    
    /* Distributes the logo to the left edge and the nav links to the right edge */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%; 
    
    /* Creates a translucent blur effect over content scrolling underneath */
    background-color: rgba(15, 30, 22, 0.95); 
    backdrop-filter: blur(5px);
    border-bottom: 1px solid var(--line-color); 
    z-index: 100; /* Ensures the header renders visually above all other page content */
}

/* Turns the translucent header into a solid wall when the menu is open */
.top-bar.menu-open {
    background-color: var(--bg-forest);
    backdrop-filter: none;
}

/* Masthead Typography */
.logo {
    font-size: 2.8rem; 
    font-weight: 400;  
    font-style: italic; 
    letter-spacing: 1px;
    text-decoration: none;
    color: var(--cream); 
    transition: color 0.4s ease; 
}

.desktop-nav {
    display: flex;
    gap: 1rem; /* Horizontal spacing between the navigation links */
    align-items: center;
}

/* Desktop Nav Links */
.desktop-nav a {
    font-size: 1.1rem; 
    letter-spacing: 0.5px; 
    text-decoration: none;
    color: var(--cream); 
    padding: 0.4rem 1.4rem;
    
    /* An invisible border pre-allocates physical space so the layout doesn't shift on hover */
    border: 1px solid var(--line-color); 
    transition: all 0.4s ease; 
}

/* --- Global Hover & Active States --- */
/* Groups all link hover behaviors into a single execution block */
.logo:hover, 
.desktop-nav a:hover, 
.nav-overlay a:hover {
    color: var(--vermilion); 
    border-color: var(--vermilion); 
}

/* Locks colors and removes the pointer cursor for the active page marker */
.logo.active, 
.desktop-nav a.active, 
.nav-overlay a.active {
    color: var(--gold);
    border-color: var(--gold);
    cursor: default; 
}

/* ==========================================================================
   3. Mobile Menu Button & Overlay
   ========================================================================== */
.menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: none; /* Remains hidden on desktop viewports */
    flex-direction: column;
    gap: 8px; /* Vertical spacing between the three hamburger lines */
    z-index: 101; /* Set higher than the overlay (z-index 99) to remain clickable when open */
}

/* Individual lines of the hamburger icon */
.menu-btn .line {
    display: block;
    width: 35px;
    height: 1px; 
    background-color: var(--cream); 
    transition: background-color 0.4s ease;
}

/* 1. CLOSED STATE (Default) */
.menu-btn .line {
    background-color: var(--cream);
    transition: background-color 0.4s ease;
}

/* 2. OPEN STATE (Menu is active) */
.menu-btn.open .line {
    background-color: var(--gold);
}

/* 3. TAPPED STATE (Universal tap feedback, strips transition delay) */
.menu-btn:active .line {
    background-color: var(--vermilion) !important;
    transition: none !important;
}

/* 4. DESKTOP HOVER (Prevents the iOS sticky-hover bug) */
@media (hover: hover) {
    .menu-btn:hover .line { background-color: var(--vermilion); }
    .menu-btn.open:hover .line { background-color: var(--vermilion); }
}

/* Full-Screen Mobile Navigation */
.nav-overlay {
    display: none; /* Hidden by default; toggled via JavaScript */
    position: fixed;
    inset: 0; /* Locks the overlay to all 4 corners of the screen */
    background-color: var(--bg-forest);
    z-index: 99; 
}

/* Applied via JS: Switches the overlay to an active flex container */
.nav-overlay.open {
    display: flex;
    justify-content: center;
    
    /* 1. Removed align-items: center; to prevent the top from being cut off */
    align-items: flex-start; 
    
    /* 2. Pushes the top of the menu safely below your 90px header */
    padding-top: 140px; 
    padding-bottom: 60px; /* Adds breathing room at the bottom of the list */
    
    /* 3. Allows the user to vertically scroll the menu on very short phone screens */
    overflow-y: auto; 
}

.nav-overlay ul {
    list-style: none; /* Strips default browser bullet points */
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 3rem; /* Expands vertical spacing for larger touch targets */
}

.nav-overlay a {
    text-decoration: none;
    color: var(--cream); 
    font-size: 3.5rem; 
    letter-spacing: 1px; 
    transition: color 0.4s ease; 
}

/* ==========================================================================
   4. Core Page Architecture & Layouts
   ========================================================================== */
/* Shared spacing for top-level containers to clear the fixed 90px header */
.hero, .page-content {
    min-height: 100vh; /* Ensures the container always fills the vertical screen space */
    display: flex;
    justify-content: center;
    padding: 180px 5% 100px; 
}

.hero { align-items: flex-start; }

/* Shared width constraints to cap maximum line length */
.quote-box, .editorial-layout, .text-column {
    width: 100%;
    max-width: 850px;
}

.title-box { margin-bottom: 3rem; }

/* Stylized header block */
.quote-box {
    padding: 2rem 0 2rem 3rem;
    border-left: 1px solid var(--gold); 
}

.quote-box h1 {
    font-size: 5.5rem; 
    font-weight: 400; 
    line-height: 1.1; /* Condenses the vertical gap on multi-line headers */
}

.text-column p {
    font-size: 1.25rem;
    line-height: 1.8;
    margin: 1rem 0;
}

/* --- Inline Text Links --- */
.text-column a {
    color: var(--cream);
    text-decoration: none; /* Strips the ugly default browser underline */
    
    /* Creates a custom, architectural baseline that sits perfectly under the text */
    border-bottom: 1px solid var(--line-color); 
    
    /* Smoothly animates both the text and the underline simultaneously */
    transition: color 0.25s ease-out, border-color 0.25s ease-out;
}

/* The Vermilion Illumination State */
.text-column a:hover {
    color: var(--vermilion);
    border-bottom-color: var(--vermilion);
}

/* Drop Cap Typography */
.drop-cap {
    float: left; /* Allows standard body text to wrap around the large character */
    font-size: 4.5rem;
    line-height: 1; /* Pulls the surrounding text closer to the cap element */
    padding: 0 0.75rem 0 0;
    color: var(--gold); 
    font-style: italic;
}

/* ==========================================================================
   5. List Layouts
   ========================================================================== */
.article-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Adds a baseline divider to separate list entries */
.article-item {
    border-bottom: 1px solid var(--line-color);
    padding-bottom: 2rem;
}

.article-date {
    font-size: 0.9rem;
    color: var(--gold); 
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    display: block; /* Forces the element onto its own line above the title */
}

.article-item h2 {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.article-item h2:hover {
    color: var(--vermilion); 
    cursor: pointer;
}

.article-item p {
    font-size: 1.25rem;
    opacity: 0.9; /* Slightly dims the preview text relative to the header */
}

/* ==========================================================================
   6. Archive Layouts & Grid Systems
   ========================================================================== */
.index-section h2 {
    font-size: 3rem;
    color: var(--gold);
    margin-bottom: 2rem;
}

/* Timestamps */
.update-date {
    font-family: 'Doto', monospace;
    font-size: 1rem;
    color: var(--gold); 
    margin: -2rem 0 1rem 0; /* Negative top margin pulls it vertically closer to the <h2> */
}

/* Structural Dividers */
hr.gold-divider {
    border: none;
    border-top: 1px solid var(--gold);
    width: 100%;
    margin: 4rem 0;
}

/* --- Data Table System --- */
.run-data-table {
    margin: 2rem auto; /* The 'auto' property centers the table within its parent container */
    width: 100%;
    max-width: 500px; /* Constrains max width to prevent excessive gap spacing on large screens */
    border-collapse: collapse; /* Fuses adjacent cell borders into a single 1px line */
    margin-top: 4rem;
}

/* Applies identical border properties to the outer frame and internal grid */
.run-data-table, .run-data-table td {
    border: 1px solid var(--line-color);
}

.run-data-table td {
    padding: 0.8rem 1.2rem; 
}

/* The Labels (Left Side) - Normal Editorial Font */
.data-label { 
    text-align: left; 
    font-family: 'EB Garamond', serif;
    font-size: 1.25rem; /* Slightly larger to match your body text */
    color: var(--cream);
}

/* The Values (Right Side) - Vintage Hardware Font */
.data-value { 
    text-align: right; 
    font-family: 'Doto', monospace;
    font-size: 1rem; /* Kept smaller because Doto naturally renders quite wide */
    color: var(--gold); /* Optional: Adding your gold accent makes the data pop */
}

/* --- Image Grid System --- */
.lego-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Calculates 3 strictly equal columns */
    gap: 0.5rem; 
    width: 100%;
    margin: 4rem 0 5rem 0;
}

.lego-cell {
    aspect-ratio: 1 / 1; /* Locks the container to a 1:1 square regardless of physical width */
    overflow: hidden; /* Clips any image bleed outside the square bounds */
    background-color: #ffffff;
    
    /* Flexbox properties perfectly center the image inside the rigid cell bounds */
    display: flex;
    align-items: center;     
    justify-content: center; 
}

.lego-cell img {
    width: 95%; /* Creates a slight inset padding effect against the background color */
    height: 100%; 
    object-fit: contain; /* Scales the image to fit the container without cropping */
    display: block;
    transition: transform 0.15s ease-out; 
}

.lego-cell:hover img { 
    transform: scale(1.02); /* Applies a minimal scaling transform on interaction */
}

/* ==========================================================================
   7. Form Architecture
   ========================================================================== */

.inquiry-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Horizontal split for adjacent inputs */
.form-row.split {
    display: flex;
    gap: 1.5rem;
}

/* Guarantees child elements evenly divide the flex container */
.form-row.split .form-group { flex: 1; }

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem; /* Tightens the spacing between a label and its target input */
}

/* Form Inputs */
.form-group label {
    font-family: 'EB Garamond', serif; 
    font-size: 1.25rem;
    color: var(--cream);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    font-family: 'Doto', monospace;
    font-size: 1rem;
    color: var(--gold);
    background-color: var(--bg-forest);
    
    /* Overrides default browser form styling */
    border: 1px solid var(--line-color);
    border-radius: 0; 
    outline: none; /* Removes the default glowing focus ring */
    transition: border-color 0.4s ease;
}

/* Active focus state */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--vermilion);
}

.submit-btn {
    align-self: flex-start; 
    width: fit-content; 
    flex-shrink: 0;
    padding: 0.8rem 2rem;
    font-family: 'Doto', monospace; /* <-- Swapped to Doto */
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold);
    background-color: var(--bg-forest);
    border: 1px solid var(--line-color);
    border-radius: 0; 
    cursor: pointer;
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* Hover Interaction */
.submit-btn:hover {
    color: var(--vermilion);
    
    /* Only overwrite the color, leaving the 1px solid structure untouched */
    border-color: var(--vermilion);
}

.form-actions {
    display: flex;
    align-items: center; 
    justify-content: space-between; /* Pushes elements to opposite edges */
    gap: 1.5rem; 
    margin-top: 1rem;
}

/* Forces form feedback messages into the mechanical UI font */
#form-result {
    font-family: 'Doto', monospace;
    text-transform: uppercase; /* Optional: adds to the terminal/system-message aesthetic */
    font-size: 1rem;         /* Adjust this to match your button or label sizes */
    letter-spacing: 0.05em;    /* Gives the system text a bit of structural breathing room */
    margin-top: 1rem;          /* Ensures it doesn't crowd the submit button */
}

@media (max-width: 600px) {
    .form-actions {
        flex-direction: column-reverse; 
        align-items: flex-start; 
    }
}

/* ==========================================================================
   8. Responsive Breakpoints
   ========================================================================== */
/* Executes when viewport is 768px or smaller */
@media (max-width: 768px) {
    .desktop-nav { display: none; } /* Hides standard navigation */
    .menu-btn { display: flex; }    /* Reveals mobile toggle */
    
    .quote-box { padding-left: 1.5rem; }
    
    /* Reduces top padding to account for smaller screen heights */
    .hero, .page-content { padding-top: 140px; }
    
    /* Modifies grid math from 3 columns to 2 */
    .lego-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.25rem; 
    }
}

/* Executes ONLY when viewport is 769px or larger */
@media (min-width: 769px) {
    /* Absolute failsafe to prevent the overlay from rendering on desktop */
    .nav-overlay { display: none !important; }
}

/* Executes when viewport is 600px or smaller */
@media (max-width: 600px) {
    /* Alters flex flow to stack inputs vertically instead of horizontally */
    .form-row.split {
        flex-direction: column; 
    }
    
    /* Expands the button width to maximize the touch target area */
    .submit-btn { width: 100%; }

}

/* ==========================================================================
   Master Touch/Active Overrides
   Provides immediate physical tap feedback by stripping transition delays
   ========================================================================== */

.logo:active,
.desktop-nav a:active,
.nav-overlay a:active,
.text-column a:active,
.article-item h2:active,
.submit-btn:active {
    transition: none !important;
    color: var(--vermilion) !important;
    border-color: var(--vermilion) !important;
}

/* Specifically targets the internal lines of the hamburger menu */
.menu-btn:active .line {
    transition: none !important;
    background-color: var(--vermilion) !important;
}

/* The Ultimate Scroll Lock */
body.no-scroll {
    overflow: hidden;
    height: 100vh;
    touch-action: none; /* Strictly forbids touch-dragging on the body */
}

/* Restores touch-dragging strictly for the menu so you can still scroll your links */
.nav-overlay {
    touch-action: auto; 
}

/* The Ghost Trap: Completely invisible to humans, visually "perfect" to a bot */
.ghost-trap {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}