/* ==========================================================================
           1. CENTRAL COLOR PALETTE (Subdued Dark-Mode Matte Palette)
           ========================================================================== */
        :root {
            /* Text & UI Lines */
            --text-main: #cbd5e0;       /* Soft silver-grey for high legibility without glare */
            --text-heading: #f7fafc;    /* Clean off-white for crisp, readable headings */
            --text-muted: #a0aec0;      /* Subdued slate-grey for dates and minor labels */
            --border-double: #4a5568;   /* Dark iron tone for the double-line section dividers */
            --card-border: #2d3748;     /* Muted border edges on your workshop log cards */

            /* Section Background Tones */
            --bg-header: #1a202c;       /* Deep charcoal for the sticky navigation bar */
            --bg-history: #2d3748;      /* Section 1: Dark charcoal-slate */
            --bg-variations: #232a35;   /* Section 2: Deep midnight machine-slate */
            --bg-my-bike: #1a202c;      /* Section 3: Deep garage iron */
            --bg-card: #2d3748;         /* Subdued background backing for your workshop post cards */
            
            /* Interactive Accents */
            --accent-hover: #90cdf4;    /* A soft, non-glare sky blue accent for hovered links */
        }

        /* ==========================================================================
           2. GLOBAL RESET & BASE SETUP
           ========================================================================== */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        html {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            color: var(--text-main);
            line-height: 1.65;
            background-color: var(--bg-my-bike); 
        }

        :target {
            scroll-margin-top: 80px; 
        }

        .alignjustify {
            text-align: justify;
        }
        
        /* Applies to all photos within your main content or galleries */
        .entry-content img, .gallery-item img {
          /* Rounds the corners */
          border-radius: 8px;
          
          /* Adds crisp edge definition */
          border: 1px solid rgba(0, 0, 0, 0.08);
          
          /* Creates the smooth drop shadow */
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 
                      0 1px 3px rgba(0, 0, 0, 0.06);
          
          /* --- CENTERING LOGIC --- */
          display: block;       /* Forces the image onto its own line */
          margin-left: auto;    /* Pushes equal empty space on the left */
          margin-right: auto;   /* Pushes equal empty space on the right */
          margin-top: 20px;     /* Optional: adds consistent space above the photo */
          margin-bottom: 20px;  /* Optional: adds consistent space below the photo */
          
          /* Responsiveness */
          max-width: 100%;
          height: auto;
          
          background: #aaa;
        }        
        
        .limit-height {
            max-height: 500px;
        }
        
        /* ==========================================================================
           3. STICKY HEADER & NAV LOGO
           ========================================================================== */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: var(--bg-header);
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
            z-index: 1000;
            height: 80px;
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
            height: 100%;
        }

        .logo-text-link {
            display: flex;
            align-items: center;
            height: 100%;
            text-decoration: none;
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--text-heading);
            letter-spacing: -0.02em;
            transition: color 0.2s ease; 
        }

        .logo-text-link:hover, .logo-text-link:active {
            color: var(--accent-hover);
        }

        /* ==========================================================================
           4. MOBILE-FIRST MENU (Checkbox Hack)
           ========================================================================== */
        .menu-toggle {
            display: none;
        }

        .hamburger {
            display: block;
            cursor: pointer;
            padding: 10px;
            z-index: 1001;
        }

        .hamburger span {
            display: block;
            width: 25px;
            height: 3px;
            background: var(--text-main);
            margin: 5px 0;
            transition: 0.3s;
        }

        .nav-menu {
            position: absolute;
            top: 80px;
            left: 0;
            width: 100%;
            background: var(--bg-header);
            list-style: none;
            display: none; 
            flex-direction: column;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
        }

        .nav-menu li a {
            display: block;
            padding: 16px 24px;
            text-decoration: none;
            color: var(--text-main);
            border-bottom: 1px solid var(--card-border);
            font-weight: 500;
        }

        .menu-toggle:checked ~ .nav-menu {
            display: flex !important;
        }

        .menu-toggle:checked ~ .hamburger span:nth-child(1) {
            transform: rotate(-45deg) translate(-5px, 6px);
        }
        .menu-toggle:checked ~ .hamburger span:nth-child(2) {
            opacity: 0;
        }
        .menu-toggle:checked ~ .hamburger span:nth-child(3) {
            transform: rotate(45deg) translate(-5px, -6px);
        }

        /* ==========================================================================
           5. DESKTOP & TABLET MEDIA QUERY (Width >= 768px)
           ========================================================================== */
        @media (min-width: 768px) {
            .hamburger {
                display: none !important;
            }

            .nav-menu {
                position: static;
                display: flex;
                flex-direction: row;
                width: auto;
                background: transparent;
                box-shadow: none;
            }

            .nav-menu li a {
                padding: 10px 16px;
                border-bottom: none;
            }
            
            .nav-menu li a:hover, .nav-menu li a:active {
                color: var(--accent-hover);
                background-color: transparent;
            }

            .posts-grid {
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important; 
                gap: 32px;
                width: 100%;
            }

            .post-card {
                max-width: 100% !important; 
                height: 100%;
            }
        }

        /* ==========================================================================
           6. SECTION BASE & DECORATIVE DOUBLE BORDERS
           ========================================================================== */
        section {
            padding: 100px 24px 100px 24px;
            min-height: 85vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            border-bottom: 5px double var(--border-double); 
        }

        section:last-of-type {
            border-bottom: none;
        }

        .content-wrap {
            width: 100%;
            max-width: 840px; 
            margin: 0 auto;
        }

        #history    { background-color: var(--bg-history); margin-top: 80px; }
        #variations { background-color: var(--bg-variations); }
        #my-bike    { background-color: var(--bg-my-bike); }

        h2 { margin-bottom: 20px; font-size: 2.2rem; font-weight: 700; color: var(--text-heading); letter-spacing: -0.02em; }
        p { font-size: 1.15rem; margin-bottom: 24px; text-align: left; }
        .section-subtitle { font-size: 1.25rem; font-style: italic; color: var(--text-muted); margin-bottom: 40px; text-align: center; }

        /* ==========================================================================
           7. WRENCHING & RIDING POSTS (Section 3 Grid Layout)
           ========================================================================== */
        #my-bike .content-wrap {
            max-width: 1000px; 
        }
        
        .posts-grid {
            display: flex;
            flex-direction: column;
            gap: 32px;
            width: 100%;
            text-align: left;
        }

        .post-card {
            background: var(--bg-card);
            border: 1px solid var(--card-border);
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .post-thumbnail {
            width: 100%;
            height: 200px;
            background: #1a202c;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-style: italic;
            border-bottom: 1px solid var(--card-border);
        }

        .post-content {
            padding: 24px;
        }

        .post-date {
            font-size: 0.85rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: block;
            margin-bottom: 8px;
        }

        .post-content h3 a {
            color: var(--text-heading);
            text-decoration: none;
        }

        .post-content h3 a:hover {
            color: var(--accent-hover);
        }

        .post-excerpt {
            color: var(--text-main);
            font-size: 0.98rem;
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .read-more {
            font-weight: 600;
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.95rem;
        }
        
        .read-more:hover {
            text-decoration: underline;
        }
        
        /* 1. THE CARD CONTAINER */
        .post-card {
          border: 1px solid rgba(0, 0, 0, 0.08);
          
          /* The Magic Combo for Full Bleed Images: */
          border-radius: 12px;       /* Gives the card its rounded look */
          overflow: hidden;          /* Clips the image so it matches the 12px radius */
          
          /* Your Background Shadow */
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 
                      0 1px 3px rgba(0, 0, 0, 0.06);
                      
          /* Centering the card on the page if needed */
          max-width: 350px;          /* Standard postcard size limit */
          margin: 20px auto;
        }

        /* 2. THE FULL-BLEED THUMBNAIL IMAGE */
        .post-card .post-thumbnail img {
          display: block;
          width: 100%;               /* Fills the card width completely */
          height: 200px;             /* Forces a standard height across all cards */
          object-fit: cover;         /* Crops the photo beautifully without stretching it */
          
          /* Notice: No border-radius needed here! The parent container handles it. */
        }

        /* 3. THE CARD TEXT CONTENT AREA */
        .post-card-content {
          padding: 16px;             /* Gives your title and text breathing room */
        }