<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barely Scripted | Navigating Life</title>
    <style>
        /* Base Styles & Fonts */
        @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;600&display=swap');

        :root {
            --bg-color: #FAFAFA;
            --text-main: #2C2C2C;
            --text-muted: #666666;
            --accent: #D4A373; /* Earthy tone */
            --card-bg: #FFFFFF;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            line-height: 1.6;
        }

        h1, h2, h3, .logo {
            font-family: 'Lora', serif;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* Navigation */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 5%;
            background-color: var(--card-bg);
            border-bottom: 1px solid #eaeaea;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 600;
            letter-spacing: -0.5px;
        }

        .logo span {
            color: var(--accent);
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 2rem;
        }

        nav a {
            font-size: 0.95rem;
            font-weight: 400;
            transition: color 0.3s ease;
        }

        nav a:hover {
            color: var(--accent);
        }

        /* Hero Section */
        .hero {
            text-align: center;
            padding: 5rem 5%;
            max-width: 800px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: var(--text-main);
        }

        .hero p {
            font-size: 1.1rem;
            color: var(--text-muted);
            margin-bottom: 2rem;
        }

        /* Blog Post Grid */
        .container {
            padding: 0 5% 4rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .section-title {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            border-bottom: 2px solid var(--accent);
            display: inline-block;
            padding-bottom: 0.5rem;
        }

        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
        }

        .post-card {
            background: var(--card-bg);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .post-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
        }

        .post-image {
            width: 100%;
            height: 220px;
            background-color: #e0e0e0;
            object-fit: cover;
        }

        .post-content {
            padding: 1.5rem;
        }

        .post-category {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: block;
        }

        .post-title {
            font-size: 1.4rem;
            margin-bottom: 0.8rem;
        }

        .post-excerpt {
            color: var(--text-muted);
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
        }

        .read-more {
            font-weight: 600;
            font-size: 0.9rem;
            border-bottom: 1px solid var(--text-main);
            padding-bottom: 2px;
        }

        .read-more:hover {
            color: var(--accent);
            border-color: var(--accent);
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 2rem;
            background-color: var(--card-bg);
            color: var(--text-muted);
            font-size: 0.9rem;
            border-top: 1px solid #eaeaea;
        }

        /* Responsive Design for Mobile */
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                gap: 1rem;
            }
            .hero h1 {
                font-size: 2.2rem;
            }
            nav ul {
                gap: 1rem;
            }
        }
    </style>
</head>
<body>

    <header>
        <div class="logo">Barely<span>Scripted</span></div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">The Journey</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <h1>Life, Unfiltered.</h1>
        <p>Embracing the messy, the beautiful, and everything in between. No perfectly curated feeds—just the raw reality of figuring it out as we go.</p>
    </section>

    <main class="container">
        <h2 class="section-title">Latest Entries</h2>
        
        <div class="blog-grid">
            
            <article class="post-card">
                <img src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Mountain landscape" class="post-image">
                <div class="post-content">
                    <span class="post-category">Travel Unscripted</span>
                    <h3 class="post-title">Unplanned Detours in Kashmir</h3>
                    <p class="post-excerpt">Sometimes the best parts of a journey are the ones left off the itinerary. Packing the bags, dropping the expectations, and navigating the peaks and valleys alongside Buboo Rani.</p>
                    <a href="#" class="read-more">Read Story</a>
                </div>
            </article>

            <article class="post-card">
                <img src="https://images.unsplash.com/photo-1517842645767-c639042777db?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Coffee and notebook" class="post-image">
                <div class="post-content">
                    <span class="post-category">The Grind</span>
                    <h3 class="post-title">Finding Balance in the Chaos</h3>
                    <p class="post-excerpt">When you are constantly shifting gears, finding an even keel isn't about perfection; it's about learning how to steady the ship when the waves hit.</p>
                    <a href="#" class="read-more">Read Story</a>
                </div>
            </article>

            <article class="post-card">
                <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Walking path" class="post-image">
                <div class="post-content">
                    <span class="post-category">Reflections</span>
                    <h3 class="post-title">The Beauty of the Middle Step</h3>
                    <p class="post-excerpt">We always talk about the starting line and the finish line. But what about the middle? The messy, confusing, and wonderful phase of just being a work in progress.</p>
                    <a href="#" class="read-more">Read Story</a>
                </div>
            </article>

        </div>
    </main>

    <footer>
        <p>&copy; 2026 Barely Scripted. Navigating life one word at a time.</p>
    </footer>

</body>
</html>