/* ==========================================================================
   MINI-LAYOUT FOUNDATION (Header & Footer Grid)
   ========================================================================== */
body.mini-layout {
    margin: 0;
    padding: 0;
    background-color: #fdfdfc;
}

/* Header */
.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;
}
.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;
}
.header-mini .mini-nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}
.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;
    transition: color 0.2s ease;
}
.header-mini .mini-link:hover {
    color: #111;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px; 
}

/* Footer */
footer[role="contentinfo"] {
    max-width: 680px;
    margin: 4rem auto 2rem auto;
    padding-top: 2rem;
    border-top: 1px solid #e5e5e5;
    font-family: "Gill Sans", "Gill Sans MT", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #666;
}
.footer-license, .footer-rss, .footer-webrings { margin-bottom: 1.5rem; }
footer[role="contentinfo"] a {
    color: #444;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    transition: all 0.2s ease;
}
footer[role="contentinfo"] a:hover {
    color: #111;
    border-bottom-color: #111;
}
.footer-license img { display: block; margin-bottom: 0.75rem; image-rendering: pixelated; }
.footer-webrings p { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; }
.footer-webrings a:first-child, .footer-webrings a:last-child { border-bottom: none; }


/* ==========================================================================
   NOW PAGE SPECIFICS
   ========================================================================== */

/* Reading Column */
.single-entry.type-page.page-now {
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem 1rem;
    font-family: Palatino, Georgia, 'Times New Roman', serif;
    color: #2a2a2a; 
}

/* The Header Area */
.single-entry.type-page.page-now .entry-header {
    margin-bottom: 3rem;
}

/* Stark, modern Title */
.single-entry.type-page.page-now .entry-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    margin: 0 0 0.5rem 0;
    color: #111;
}

/* The Timestamp 
   Uses a monospace stack to make the "Published on" date feel 
   like a system log or status update.
*/
.single-entry.type-page.page-now .entry-date {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.85rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: #f4f4f4; /* Gives it a slight highlighted "badge" look */
    border-radius: 3px;
}

/* Body Content Base */
.single-entry.type-page.page-now .entry-content {
    font-size: 1.125rem;
    line-height: 1.7;
}
.single-entry.type-page.page-now .entry-content p {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Category Headers (e.g., ## Reading, ## Building)
   Un-bolded, italic serifs for a classic editorial feel. 
*/
.single-entry.type-page.page-now .entry-content h2 {
    font-weight: normal;
    font-style: italic;
    font-size: 1.75rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    color: #111;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 0.5rem;
}

/* Sub-Category Headers (e.g., ### Work, ### Play)
   Uppercase sans-serif for strong, clean hierarchy.
*/
.single-entry.type-page.page-now .entry-content h3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #555;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

/* Now Page Lists */
.single-entry.type-page.page-now .entry-content ul {
    list-style-type: square; 
    padding-left: 1.5rem;
    margin-bottom: 2rem;
}
.single-entry.type-page.page-now .entry-content li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

/* ==========================================================================
   Expandable Details & Summary (Parentheticals)
   ========================================================================== */

/* The main container */
.single-entry.type-page.page-now .entry-content details {
    margin-bottom: 1.5rem;
}

/* The clickable title */
.single-entry.type-page.page-now .entry-content summary {
    cursor: pointer;
    font-weight: 600; /* Bolds the title */
    color: #111;
    transition: color 0.2s ease;
}

/* Hover state for the summary */
.single-entry.type-page.page-now .entry-content summary:hover {
    color: #555;
}

/* When the details block is clicked open, we style the content inside.
   This creates a subtle vertical line to the left of the expanded text, 
   visually grouping it as a "child" of the summary, like a blockquote.
*/
.single-entry.type-page.page-now .entry-content details[open] {
    margin-bottom: 2rem; /* Adds a little extra breathing room when open */
}

/* Targets the actual text you reveal inside the details block */
.single-entry.type-page.page-now .entry-content details > *:not(summary) {
    margin-top: 0.75rem;
    padding-left: 1.25rem; /* Indents the text away from the margin */
    border-left: 2px solid #eaeaea; /* The subtle connecting line */
    color: #444; /* Slightly lighter text to show it's secondary information */
    font-size: 1.05rem; /* Just a hair smaller than the main body text */
}

/* Removes the ugly default focus outline when clicking, 
   but keeps a subtle underline for accessibility */
.single-entry.type-page.page-now .entry-content summary:focus {
    outline: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: #ccc;
}