/* 
 * Hawkeye Magazine Styles
 * A reliquary for beautiful words
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */
        h1 { font-size: 4em; }
        h1.title { margin-bottom: 0.1em }
        h2 { font-size: 1.5em; margin-top: 1em; }
        h2.subtitle {margin-top: 0.1em; margin-bottom: 0.1em; }
        h3 { font-size: 1.2em; margin-top: 1em; line-height: 1.4; }
        
        body {
            background-color: DarkOliveGreen;
            color: white;
            font-family: Garamond, serif;
            margin: 0;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        nav {
            text-align: center;
        }
        
        a {
            color: white;
            text-decoration: none;
            margin: 0 20px;
            font-size: 1.2em;
            border-bottom: 2px solid transparent;
            transition: border-color 0.3s;
        }
        
        nav a:hover {
            border-bottom-color: white;
        }
        
        /* Bottle Rocket style work list */
        .work-list {
            margin-top: 2em;
        }
        
        .work-entry {
            margin-bottom: 1.5em;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding-bottom: 1em;
        }
        
        .work-entry:last-child {
            border-bottom: none;
        }
        
        .work-title {
            margin: 0 0 0.5em 0;
            font-size: 1.2em;
            font-weight: bold;
            line-height: 1.3;
            padding: 0.1em 0 0.5em;
        }
        
        .work-title a {
            color: white;
            text-decoration: none;
        }
        
        .work-title a:hover {
            text-decoration: underline;
        }
        
        .work-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9em;
        }
        
        .read-more {
            color: #E6E6FA;
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 2px;
        }
        
        .read-more:hover {
            color: white;
            text-decoration-thickness: 2px;
        }
        
        .work-date {
            color: rgba(255, 255, 255, 0.8);
            font-style: italic;
            font-size: smaller;
            margin: 1em 0;
            padding: 0 20px;
        }
        
        /* Legacy story styles for compatibility */
        .story-list {
            margin-top: 2em;
        }
        
        .story-item {
            margin-bottom: 2em;
            padding: 1em;
            border-left: 3px solid white;
            padding-left: 1.5em;
        }
        
        .story-item h3 {
            margin-top: 0;
        }
        
        .story-item a {
            color: white;
            text-decoration: none;
        }
        
        .story-item a:hover {
            text-decoration: underline;
        }
        
        .story-meta {
            font-style: italic;
            opacity: 0.8;
            margin-bottom: 0.5em;
        }
        
        .content {
            line-height: 1.6;
        }
        
        .home-title {
            text-align: center;
        }
        
        /* Mailto link styling */
        .content a {
            color: #E6E6FA; /* Light lavender - subtle but clickable */
            text-decoration: underline;
            text-underline-offset: 3px;
            text-decoration-thickness: 1px;
            transition: all 0.3s ease;
        }
        
        .content a:hover {
            color: white;
            text-decoration-thickness: 2px;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
        }

        /* Footer styles */
        footer {
            margin-top: 4em;
            padding-top: 2em;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            text-align: center;
        }
        
        .social-links {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .social-link {
            display: inline-flex;
            align-items: center;
            color: #E6E6FA;
            text-decoration: none;
            padding: 0.75em 1.5em;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            transition: all 0.3s ease;
            font-size: 0.9em;
        }
        
        .social-link:hover {
            color: white;
            border-color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .social-icon {
            font-size: 1.2em;
            margin-right: 0.5em;
            font-weight: bold;
        }
        
        .social-text {
            font-family: Garamond, serif;
        }
        
/* ==========================================================================
   Poetry and Formatted Text
   ========================================================================== */

.poetry-container {
    margin: 2em 0;
}

.poetry, pre.poetry {
    font-family: Garamond, serif;
    font-size: 1em;
    line-height: 1.4;
    color: white;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
}

.poetry em, .poetry i {
    font-style: italic;
}

.poetry strong, .poetry b {
    font-weight: bold;
}

        @media (max-width: 768px) {
            footer {
                margin-top: 3em;
                padding-top: 1.5em;
            }
            
            .social-link {
                padding: 0.6em 1.2em;
                font-size: 0.85em;
            }
            
            .poetry, pre.poetry {
                font-size: 0.9em;
            }
        }