/* ==========================================================================
   Post Layout: "One Year Out" and other general writing pieces
   ========================================================================== */

/* Base container for the post. 
  Limits the width to ~65-75 characters per line for optimal eye tracking.
*/
.single-entry.type-posts {
    max-width: 680px;
    margin: 0 auto; /* Centers the post horizontally */
    padding: 2rem 1rem;
    font-family: Geneva, 'Times New Roman', serif; 
    color: #2a2a2a; /* Off-black reduces eye strain compared to pure black */
}

/* Header Section 
*/
.single-entry.type-posts .entry-header {
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 1.5rem;
}

.single-entry.type-posts .entry-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 0.75rem 0;
    color: #111;
    letter-spacing: -0.03em; /* Slightly pulls the big letters together */
}

.single-entry.type-posts .entry-date {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.9rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block; /* Ensures it sits on its own line */
}

/* ==========================================================================
   Mini Layout & Header Navigation
   ========================================================================== */

/* The Body Wrapper 
   Zeros out browser defaults and sets a comfortable background baseline 
*/
body.mini-layout {
    margin: 0;
    padding: 0;
    background-color: #fdfdfc; /* A very subtle off-white to reduce screen glare */
}

/* The Header Container 
   Shares the exact max-width (680px) as your article to keep the layout unified.
   Uses Flexbox to push the logo left and the nav right.
*/
.header-mini {
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem 1rem 1.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
}

/* Left Side: Logo Styling 
   Constrains the SVG wolf logo so it doesn't blow up to its native size 
*/
.header-mini .logo.small-logo {
    height: 40px;
    width: auto;
    display: block;
    transition: opacity 0.2s ease;
}

.header-mini a:hover .logo.small-logo {
    opacity: 0.75;
}

/* Right Side: Navigation Links Container */
.header-mini .mini-nav-links {
    display: flex;
    gap: 1.5rem; /* Adds breathing room if you add more links to this partial later */
    align-items: center;
}

/* Individual Navigation Links 
   Uses a clean, modern sans-serif to contrast beautifully with the serif body text 
*/
.header-mini .mini-link {
    font-family: "Gill Sans", "Gill Sans MT", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    letter-spacing: 0.03em;
    text-transform: uppercase; /* Gives it a slight "system interface" feel */
    transition: color 0.2s ease;
}

/* Link Hover State 
   Instead of a standard underline, this uses text-underline-offset to drop 
   the line down slightly so it doesn't cut through the bottom of the letters.
*/
.header-mini .mini-link:hover,
.header-mini .mini-link:focus {
    color: #111;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px; 
}

/* Body Content Section 
*/
.single-entry.type-posts .entry-content {
    font-size: 1.125rem; /* 18px base size for comfortable reading */
    line-height: 1.7; /* Generous breathing room between lines */
}

.single-entry.type-posts .entry-content p {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Optional: Gives your italics/emphasis a subtle, classic ink feel */
.single-entry.type-posts .entry-content em {
    color: #111;
    font-style: italic;
}

/* ==========================================================================
   Footer Layout
   ========================================================================== */

/* Main Footer Container 
   Maintains the 680px grid, adds a subtle top border, and shrinks the text 
   to act as secondary information.
*/
footer[role="contentinfo"] {
    max-width: 680px;
    margin: 4rem auto 2rem auto; /* Plenty of space between the article end and the footer */
    padding-top: 2rem;
    border-top: 1px solid #e5e5e5;
    
    /* Using the header's sans-serif stack to "bracket" the serif reading content */
    font-family: "Gill Sans", "Gill Sans MT", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #666; /* Muted text so it doesn't compete with the article */
}

/* Footer Section Spacing */
.footer-license,
.footer-rss,
.footer-webrings {
    margin-bottom: 1.5rem;
}

/* Footer Links 
   Distinct from the nav links—these use a subtle border-bottom instead of 
   text-decoration for a slightly more polished, editorial feel.
*/
footer[role="contentinfo"] a {
    color: #444;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    transition: all 0.2s ease;
}

footer[role="contentinfo"] a:hover,
footer[role="contentinfo"] a:focus {
    color: #111;
    border-bottom-color: #111;
}

/* 88x31 Button Styling 
   Ensures the classic badge stays crisp and aligns nicely with the text
*/
.footer-license img {
    display: block;
    margin-bottom: 0.75rem;
    image-rendering: pixelated; /* Keeps that retro badge nice and sharp */
}

/* Webring Formatting 
   Cleans up the spacing around your webring arrows and text
*/
.footer-webrings p {
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Puts a little breathing room between the arrows and the title */
}

/* Removes the underline from the webring arrows specifically, as it can look messy */
.footer-webrings a:first-child,
.footer-webrings a:last-child {
    border-bottom: none;
}