/* Color Palette for Moody Theme */
:root {
    --dark-bg: #1A1A2E; /* Very dark blue/purple */
    --main-bg: #16213E; /* Slightly lighter base */
    --accent-dark: #0F3460; /* Deeper accent */
    --text-color: #E0E0FF; /* Soft off-white for main text */
    --heading-color: #E94560; /* Muted crimson/rose for headings */
    --link-color: #BFDBFE; /* Gentle blue for links */
    --visited-link-color: #9AB0D0; /* A slightly darker, muted blue for visited links */
    --border-color: #333C57; /* Subtle separator */
    --card-bg: #2D3748; /* For snippet/artwork cards, could be a slightly lighter dark-bg */
    --accent-red: #E94560; /* Defined from heading-color for clarity in buttons */
    --accent-blue: #66B2FF; /* A new accent blue if needed for buttons, or just use link-color */
    /* I'll use --accent-red for the primary button color as it matches your desired example */
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif; /* Readable sans-serif for body */
    background-color: var(--main-bg);
    color: var(--text-color);
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scroll when mobile nav is open */
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
}

/* General Link Styling (important for visited state) */
a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:visited {
    color: var(--visited-link-color); /* Set visited links to a muted version of the normal link color */
}

a:hover {
    color: var(--heading-color); /* Usually same as main heading or active link color */
}


/* Header & Navigation */
.site-header {
    background-color: var(--dark-bg);
    padding: 50px 0;
    text-align: center;
    border-bottom: 2px solid var(--border-color);
    position: relative; /* Needed for hamburger positioning */
}

.site-title {
    font-family: 'Merriweather', serif; /* Elegant serif for title */
    font-size: 4.5em;
    color: var(--heading-color);
    margin: 0;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.5); /* Subtle glow */
    letter-spacing: 2px;
}

.site-tagline {
    font-size: 1.4em;
    color: var(--link-color);
    margin-top: 10px;
    font-style: italic;
}

/* Main horizontal navigation (visible on desktop, hidden on mobile) */
.main-nav {
    background-color: var(--accent-dark);
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000; /* Keeps nav visible on scroll */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

.main-nav ul li {
    margin: 0 15px;
}

.main-nav ul li a {
    color: var(--text-color); /* Specific for nav items */
    text-decoration: none;
    font-size: 1.1em;
    padding: 8px 15px;
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 5px;
}

.main-nav ul li a:hover {
    color: var(--heading-color);
    background-color: rgba(255, 255, 255, 0.05);
}
/* Ensure visited nav links also match the normal color unless specifically desired */
.main-nav ul li a:visited {
    color: var(--text-color);
}


/* Hamburger Menu Styles */
.hamburger {
    display: none; /* Hidden by default on desktop */
    position: absolute;
    top: 20px; /* Adjust as needed */
    right: 20px; /* Adjust as needed */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Above other elements */
}

.hamburger-line {
    display: block;
    width: 30px;
    height: 3px;
    background-color: var(--text-color);
    margin: 6px 0;
    transition: all 0.3s ease;
}

/* Optional: Hamburger animation when active */
.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
}
.hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Mobile Navigation (off-canvas menu) */
.mobile-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -100%; /* Start off-screen to the right */
    width: 250px; /* Width of the mobile menu */
    height: 100%;
    background-color: var(--accent-dark); /* Dark background for the menu */
    padding-top: 80px; /* Space for header/hamburger */
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    transition: right 0.3s ease;
    z-index: 1000;
}

.mobile-nav.active {
    right: 0; /* Slide in when active */
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.mobile-nav ul li {
    margin-bottom: 20px;
}

.mobile-nav ul li a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 1.4em; /* Larger font for mobile links */
    padding: 10px 0;
    display: block; /* Make links fill their space for easier tapping */
    transition: color 0.3s ease, background-color 0.3s ease;
}

.mobile-nav ul li a:hover,
.mobile-nav ul li a:active {
    color: var(--heading-color);
    background-color: rgba(255, 255, 255, 0.1);
}
.mobile-nav ul li a:visited {
    color: var(--text-color); /* Keep visited consistent with normal mobile link */
}


/* Main Content Sections */
.site-content {
    flex-grow: 1;
    padding-top: 40px;
    padding-bottom: 40px;
}

.intro-section {
    text-align: center;
    margin-bottom: 60px;
}

.book-cover {
    max-width: 300px; /* Adjust size as needed */
    height: auto;
    border: 3px solid var(--heading-color);
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.4);
    margin-bottom: 30px;
}

.intro-section h2, .content-section h2, .intro-text-snippets h2 { /* Added .intro-text-snippets h2 */
    font-family: 'Merriweather', serif;
    font-size: 2.8em;
    color: var(--heading-color);
    margin-bottom: 25px;
    text-align: center;
}

.intro-section p {
    font-size: 1.1em;
    max-width: 700px;
    margin: 0 auto 15px auto;
}

.call-to-action {
    font-size: 1.3em;
    color: var(--link-color);
    font-weight: bold;
    margin-top: 30px;
}

/* Snippet Section on Main Page */
.snippet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.snippet-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.snippet-card:hover {
    transform: translateY(-5px);
}

.snippet-card h3 {
    color: var(--link-color);
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 15px;
}

.snippet-card p {
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* REMOVED: .snippet-card .read-more from here, as it's now .button */
/*
.snippet-card .read-more {
    color: var(--heading-color);
    text-decoration: none;
    font-weight: bold;
    display: block;
    text-align: right;
}
.snippet-card .read-more:visited {
    color: var(--visited-link-color);
}
*/

/* General Buttons */
.button, .social-button {
    display: inline-block; /* Keep this! */
    background-color: var(--accent-dark);
    color: var(--text-color);
    padding: 12px 25px;
    border: 1px solid var(--heading-color); /* Matches your desired red border */
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin: 10px; /* Consider if this margin is desired everywhere */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.button:hover, .social-button:hover {
    background-color: var(--heading-color); /* Matches your desired red background on hover */
    color: var(--dark-bg);
    border-color: var(--heading-color);
}
.button:visited, .social-button:visited {
    color: var(--text-color);
}


/* Styling for /snippets/index.html */
.snippets-list-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.snippet-card-listing {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.snippet-card-listing:hover {
    transform: translateY(-8px);
    background-color: var(--hover-bg); /* This variable is not defined, will default */
}
.snippet-card-listing h3 {
    margin-top: 0;
    font-size: 1.8em;
    margin-bottom: 15px;
    color: var(--heading-color);
    font-family: 'Merriweather', serif;
}
.snippet-card-listing p {
    font-size: 1em;
    color: var(--text-color);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* For the snippet-button-container approach (if you decide to use a class instead of inline style) */

.snippet-button-container {
    text-align: left;
    margin-top: 20px;
}


.intro-text-snippets {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.1em;
    color: var(--text-color);
}


/* Styling for individual snippet pages */
.snippet-content-wrapper {
    background-color: var(--card-bg);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    margin-bottom: 40px;
    max-width: 800px; /* Constrain width for readability */
    margin-left: auto;
    margin-right: auto;
}
.snippet-content-wrapper h2 {
    font-family: 'Merriweather', serif;
    font-size: 2.8em;
    color: var(--heading-color);
    margin-bottom: 25px;
    text-align: center;
}
.snippet-text {
    font-size: 1.2em; /* Larger font for readability */
    line-height: 1.8;
    text-align: justify; /* Justify text for a more literary feel */
    margin-bottom: 30px;
}
.snippet-meta {
    font-size: 0.9em;
    color: var(--link-color);
    text-align: right;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
    margin-top: 30px;
}
/* REMOVED: .back-link a, as it's now .button or a more specific class */
/*
.back-link {
    display: block;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
}
.back-link a {
    color: var(--accent-blue);
    text-decoration: none;
    padding: 12px 25px;
    border: 1px solid var(--accent-blue);
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: bold;
}
.back-link a:hover {
    background-color: var(--accent-blue);
    color: var(--dark-bg);
}
.back-link a:visited {
    color: var(--visited-link-color);
}
*/

/* Footer */
.site-footer {
    background-color: var(--dark-bg);
    color: var(--link-color);
    text-align: center;
    padding: 20px 0;
    margin-top: 60px;
    border-top: 1px solid var(--border-color);
    font-size: 0.9em;
}

/* Artwork Gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 30px;
}

.gallery-link { /* This is the clickable parent of the image */
    display: flex; /* Make it a flex container */
    justify-content: center; /* Center image horizontally */
    align-items: center; /* Center image vertically */
    height: 250px; /* FIXED HEIGHT FOR THE UNIFORM CONTAINER */
    text-decoration: none;
    line-height: 0; /* Remove extra line height below images */
    border: 2px solid var(--border-color); /* Border on the container */
    border-radius: 5px;
    background-color: var(--dark-bg); /* Background to fill empty space */
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.gallery-link:hover {
    transform: scale(1.03);
    border-color: var(--heading-color);
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.4);
}

.gallery-item { /* This is the actual image inside the link container */
    max-width: 100%; /* Image will scale down to fit container width */
    max-height: 100%; /* Image will scale down to fit container height */
    width: auto; /* Allow width to be determined by aspect ratio and max-height */
    height: auto; /* Allow height to be determined by aspect ratio and max-width */
    object-fit: contain; /* Scale image to fit entirely within container, preserving aspect ratio */
    border: none; /* No border on the image itself */
    border-radius: 0; /* No border-radius on the image itself */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .site-title {
        font-size: 3.5em;
    }
    .main-nav {
        display: none; /* Hide desktop nav on mobile */
    }
    .hamburger {
        display: block; /* Show hamburger icon on mobile */
    }
    .intro-section h2, .content-section h2, .intro-text-snippets h2 {
        font-size: 2em;
    }
    .snippet-grid, .gallery-grid, .snippets-list-section {
        grid-template-columns: 1fr;
    }
    .gallery-item {
        height: auto; /* Revert for mobile if flexbox behaves differently */
    }
    .gallery-link { /* Adjust height for mobile if desired */
        height: 180px; /* Slightly smaller fixed height on mobile */
    }
}

/* NEW STYLES FROM BASE.HTML (MOVED HERE) */
.latest-updates-section {
    padding: 50px 0;
    text-align: center;
    background-color: var(--card-bg);
    margin-top: 60px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    margin-left: auto;
    margin-right: auto;
}
.latest-updates-section h2 {
    font-family: 'Merriweather', serif;
    font-size: 3em;
    color: var(--heading-color);
    margin-bottom: 30px;
}
.updates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.front-page-update-card {
    background-color: var(--dark-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    text-align: left; /* Keep text aligned left */
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start; /* THIS IS THE KEY FOR LEFT-ALIGNING CONTENT IN FLEX ITEM */
}
.front-page-update-card:hover {
    transform: translateY(-5px);
}
.front-page-update-card h4 {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--heading-color);
}
.front-page-update-card h4 a {
    color: var(--accent-red);
    text-decoration: none;
}
.front-page-update-card h4 a:hover {
    text-decoration: underline;
}
.front-page-update-date {
    font-size: 0.9em;
    color: var(--link-color);
    margin-bottom: 15px;
}
.front-page-update-card p {
    font-size: 1em;
    color: var(--text-color);
    margin-bottom: 15px;
    flex-grow: 1;
}

/* REMOVED .front-page-read-more as it's now .button */
/*
.front-page-read-more {
    display: inline-block;
    margin-top: auto;
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: bold;
    padding: 8px 15px;
    border: 1px solid var(--accent-blue);
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.front-page-read-more:hover {
    background-color: var(--accent-blue);
    color: var(--dark-bg);
}
*/

/* REMOVED .view-all-updates-link and .view-all-updates-link a as it's now .button */
/*
.view-all-updates-link {
    margin-top: 40px;
}
.view-all-updates-link a {
    color: var(--accent-red);
    text-decoration: none;
    padding: 12px 25px;
    border: 1px solid var(--accent-red);
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: bold;
}
.view-all-updates-link a:hover {
    background-color: var(--accent-red);
    color: var(--dark-bg);
}
*/

/* Adjustments for existing elements for consistency */
.content-section {
    margin-top: 60px;
    padding: 50px 20px;
    background-color: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    margin-left: auto;
    margin-right: auto;
}
.intro-section {
    background-color: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
    padding-bottom: 50px;
}
.site-content {
    padding-top: 40px;
    padding-bottom: 80px;
}
.social-button { /* Keep this here, it's defined separately from .button above */
    color: var(--accent-blue); /* Default color for social buttons */
    text-decoration: none;
    padding: 12px 25px;
    border: 1px solid var(--accent-blue); /* Border color for social buttons */
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: bold;
    margin: 0 10px;
}
.social-button:hover {
    background-color: var(--accent-blue);
    color: var(--dark-bg);
}


/* New styles for the latest snippet display */
.latest-snippet-display {
    background-color: var(--dark-bg);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    margin-top: 30px;
    text-align: left;
}
.latest-snippet-display h3 {
    font-family: 'Merriweather', serif;
    font-size: 2em;
    color: var(--accent-red);
    margin-top: 0;
    margin-bottom: 15px;
}
.latest-snippet-display .snippet-meta {
    font-size: 0.9em;
    color: var(--link-color);
    margin-bottom: 20px;
    text-align: right;
}
.latest-snippet-display .snippet-content {
    font-size: 1.1em;
    line-height: 1.7;
    color: var(--text-color);
}

/* New styles for the dynamic artwork section */
.latest-artwork-section {
    padding: 50px 0;
    text-align: center;
    background-color: var(--card-bg);
    margin-top: 60px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    margin-left: auto;
    margin-right: auto;
}
.latest-artwork-section h2 {
    font-family: 'Merriweather', serif;
    font-size: 3em;
    color: var(--heading-color);
    margin-bottom: 30px;
}
.artwork-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.artwork-card {
    background-color: var(--dark-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    text-align: center;
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.artwork-card:hover {
    transform: translateY(-5px);
}
.artwork-card h3 {
    font-family: 'Merriweather', serif;
    font-size: 1.6em;
    color: var(--accent-red);
    margin-top: 0;
    margin-bottom: 15px;
}
.artwork-card .artwork-link {
    display: block;
    margin-bottom: 15px;
    flex-grow: 1;
}
.artwork-card .artwork-item {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .site-title {
        font-size: 3.5em;
    }
    .main-nav {
        display: none;
    }
    .hamburger {
        display: block;
    }
    .intro-section h2, .content-section h2, .intro-text-snippets h2 {
        font-size: 2em;
    }
    .snippet-grid, .gallery-grid, .snippets-list-section {
        grid-template-columns: 1fr;
    }
    .gallery-item {
        height: auto;
    }
    .gallery-link {
        height: 180px;
    }
    /* Specific adjustments for buttons on small screens if needed, e.g., to make them block again */
    /*
      .button {
      display: block;
      margin: 10px auto;
      width: calc(100% - 20px); // Example: full width minus padding
    } 
   */
}