/* ============================================================
   Heading East — Classic Template
   Modernized from the original Movable Type 3.x design.
   Preserves the typography feel and layout spirit while
   adding responsive behavior, modern CSS, and accessibility.
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --color-bg: #fff;
    --color-page-bg: #d4f2fd;  /* light sky blue matching original MT site */
    --color-page-edge: #9cb0bc;  /* dark hairline along virtual-page edges */
    --color-text: #333;
    --color-text-light: #666;
    --color-text-muted: #999;
    --color-link: #36c;
    --color-link-hover: #408040;
    --color-link-visited: #9D554A;
    --color-border: #ddd;
    --color-border-light: #eee;
    --color-highlight: #ffc;
    --color-header-bg: #f8f8f8;
    --color-sidebar-bg: #fafafa;
    --color-comment-bg: #f9f9f9;

    --font-body: Georgia, 'Times New Roman', Times, serif;
    --font-heading: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono: 'SF Mono', Menlo, Consolas, monospace;

    --width-content: 544px;
    --width-sidebar: 264px;
    --width-max: 880px;
    --gap: 0;

    --line-height: 1.6;
    --font-size-base: 17px;

    /* Blog title (overridable via Appearance settings) */
    --type-blog-title-size: 30px;
    --type-blog-title-color: #5f5f5f;

    /* Post headings (overridable via Appearance settings) */
    --type-heading-size: 19px;
    --type-heading-color: #252525;

    /* Body text color (falls back to --color-text if unset) */
    --color-body-text: var(--color-text);
}

html {
    font-size: var(--font-size-base);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    line-height: var(--line-height);
    color: var(--color-body-text);
    background: var(--color-page-bg);
}

/* --- Links --- */
a {
    color: var(--color-link);
    text-decoration: none;
}
a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}
a:visited {
    color: var(--color-link-visited);
}

/* --- Visually Hidden (accessible) --- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
    /* Transparent so body blue shows on the left/right margins.
       The white "virtual page" is formed by .header-inner + .site-container
       together, both centered at the same max-width. */
    background: transparent;
    border: none;
}

/* The page-wrap is the single "virtual page" that runs from the top of
   the viewport through the bottom of the content, holding the borders +
   lateral shadows so there's no seam between header and content. */
.page-wrap {
    max-width: var(--width-max);
    margin: 0 auto;
    background: var(--color-bg);
    border-left: 1px solid var(--color-page-edge);
    border-right: 1px solid var(--color-page-edge);
    box-shadow:
        -8px 0 8px -8px rgba(0,0,0,0.28),
         8px 0 8px -8px rgba(0,0,0,0.28);
}

.header-inner {
    padding: 20px 36px 15px;
    background: transparent;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
    position: relative;
}
/* Dotted hairline under the header — starts at the left padding edge
   (aligned with the title) and runs to the right padding edge.
   Built with a repeating gradient so we control dot spacing precisely
   (wider gaps than native CSS `dashed`/`dotted`). */
.header-inner::after {
    content: '';
    position: absolute;
    left: 36px;
    right: 36px;
    bottom: 0;
    height: 1px;
    background-image: linear-gradient(to right, #434343 2px, transparent 2px);
    background-size: 8px 1px;
    background-repeat: repeat-x;
}
.site-nav { white-space: nowrap; }

.site-title {
    font-family: var(--font-heading);
    font-size: var(--type-blog-title-size);
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--type-blog-title-color);
    text-transform: uppercase;
}

.site-title a {
    color: inherit;
    text-decoration: none;
}
.site-title a:visited {
    color: inherit;
}
.site-title a:hover {
    color: var(--color-link);
    text-decoration: none;
}

.site-nav {
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--color-text-light);
}
.site-nav a {
    color: var(--color-text-light);
}
.site-nav a:hover {
    color: var(--color-link);
}

/* ============================================================
   Layout: Content + Sidebar
   ============================================================ */
.site-container {
    padding: 0;
    background: transparent;
    display: grid;
    grid-template-columns: 7fr 3fr;
    column-gap: 0;
    align-items: start;
}

.content {
    padding: 28px 36px 40px;
    min-width: 0; /* prevent grid blowout */
}

/* ============================================================
   Posts
   ============================================================ */
.post {
    margin-bottom: 48px;
}
.post:last-child {
    margin-bottom: 24px;
}

.post-header {
    margin-bottom: 16px;
}

.date-header {
    display: block;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 400;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 16px;
}

.post-title {
    font-family: var(--font-heading);
    font-size: var(--type-heading-size);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--type-heading-color);
    margin: 0 0 4px;
    text-transform: none;
}

.post-title a {
    color: var(--color-text);
}
.post-title a:visited {
    color: var(--color-text);
}
.post-title a:hover {
    color: var(--color-link);
    text-decoration: none;
}

/* Post body */
.post-body {
    font-size: 17px;
    line-height: 1.65;
    color: #333;
}

.post-body p {
    margin-bottom: 1em;
}

.post-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.2em auto;
    border-radius: 2px;
    cursor: zoom-in;
}

/* Full-bleed images: opt-in via class="full-bleed" on the img or a wrapper div */
.post-body .full-bleed,
.post-body img.full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    border-radius: 0;
}

.post-body a[onclick] {
    /* Override legacy popup links — let images be clickable naturally */
    cursor: pointer;
}

/* --- Lightbox overlay --- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.lightbox-overlay.active {
    opacity: 1;
}
.lightbox-overlay img {
    max-width: calc(100vw - 80px);
    max-height: calc(100vh - 80px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    cursor: pointer;
    display: block;
}
.lightbox-frame {
    position: relative;
    max-width: calc(100vw - 80px);
    max-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 12px 20px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    text-align: center;
    line-height: 1.4;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    pointer-events: none;
    border-radius: 0 0 4px 4px;
}
.lightbox-caption.visible {
    transform: translateY(0);
    opacity: 1;
}
.lightbox-title-overlay {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    background: rgba(0,0,0,0.7);
    padding: 14px 24px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    max-width: 80vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lightbox-title-overlay.visible { opacity: 1; }
.lightbox-hud {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    padding: 10px 20px;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
}
.lightbox-hud a {
    color: #fff;
    text-decoration: underline;
}
.lightbox-hud a:hover {
    color: #adf;
}
.lightbox-close {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 10000;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
    opacity: 0.7;
}
.lightbox-close:hover {
    opacity: 1;
}

/* Carousel-mode arrow buttons — hidden unless overlay is in carousel-mode
   AND the user is hovering the overlay. Styled to match the inline carousel
   .carousel-btn look. */
.lightbox-carousel-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 12px 16px;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 2px;
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    display: none;
}
.lightbox-carousel-btn--prev { left: 16px; }
.lightbox-carousel-btn--next { right: 16px; }
.lightbox-overlay.carousel-mode .lightbox-carousel-btn {
    display: block;
    pointer-events: auto;
}
.lightbox-overlay.carousel-mode:hover .lightbox-carousel-btn {
    opacity: 1;
}
.lightbox-carousel-btn:hover {
    background: rgba(0, 0, 0, 0.75);
}

.post-body blockquote {
    border-left: 3px solid var(--color-border);
    margin: 1em 0;
    padding: 0.5em 0 0.5em 1.2em;
    color: var(--color-text-light);
    font-style: italic;
}

.post-body pre, .post-body code {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.post-body pre {
    background: var(--color-sidebar-bg);
    padding: 1em;
    overflow-x: auto;
    border-radius: 4px;
    margin: 1em 0;
}

.post-body ul, .post-body ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.post-body li {
    margin-bottom: 0.3em;
}

.post-body b, .post-body strong {
    font-weight: 700;
}

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

/* Post meta (author, category, tags) */
.post-meta {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light);
    font-family: var(--font-heading);
    font-size: 0.82rem;
    color: var(--color-text-light);
}

.post-info {
    margin-bottom: 4px;
}

.post-tags {
    margin-bottom: 4px;
}

.post-tags a {
    color: var(--color-text-light);
}
.post-tags a:hover {
    color: var(--color-link);
}

.post-comments-link a {
    color: var(--color-text-muted);
}

/* Post meta byline: labeled rows (POSTED AT / FILED UNDER / TAGS) +
   comment + share icons. Applies to the end-of-article footer only;
   .post-summary reuses older .post-info styling above. */
.post-meta-row {
    margin: 0 0 4px;
    line-height: 1.55;
}
.post-meta-row .meta-label {
    display: inline-block;
    min-width: 6.5em;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}
.post-meta-row .meta-link {
    color: var(--color-text-light);
}
.post-meta-row .meta-link:hover {
    color: var(--color-link);
}
.post-meta-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}
/* The aligned `min-width: 6.5em` used by POSTED AT / FILED UNDER doesn't
   belong here — for tags the label should sit one space away from the
   first chip, not in a reserved column. */
.post-meta-tags .meta-label {
    min-width: 0;
    margin-right: 0;
}
.tag-chip {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--color-text-light);
    text-decoration: none;
    white-space: nowrap;
}
.tag-chip:hover {
    color: var(--color-link);
    border-color: var(--color-link);
    text-decoration: none;
}
.tag-chip .tag-count {
    color: var(--color-text-muted);
    margin-left: 2px;
}

.post-meta-icons {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.icon-btn:not([disabled]):hover {
    color: var(--color-link);
    border-color: var(--color-link);
}
.icon-btn:not([disabled]):active {
    transform: scale(0.94);
}
.icon-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}
.icon-btn-flash {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-heading);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-link-hover);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}
.icon-btn.flash-active .icon-btn-flash {
    opacity: 1;
}

/* ============================================================
   Post Navigation (single post pages)
   ============================================================ */
.post-navigation {
    margin: 32px 0;
    padding: 16px 0;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-text-light);
    text-align: center;
}

/* Post title inside the prev/next nav. Kept in its own color so the
   "← previous" / "next →" link chrome reads as the action, and the
   title reads as the subject. Override by redefining --nav-title-color. */
.nav-title {
    font-style: italic;
    color: var(--nav-title-color, var(--color-text));
}
.post-navigation a:hover .nav-title {
    color: var(--color-link-hover);
}

/* ============================================================
   Comments
   ============================================================ */
.comments {
    margin-top: 40px;
}

.comments > h2 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin-bottom: 16px;
    color: var(--color-text);
}

.comment {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--color-comment-bg);
    border-radius: 4px;
}

.comment-meta {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.comment-author {
    font-weight: 600;
    color: var(--color-text-light);
}

.comment-author a {
    color: var(--color-text-light);
}

.comment-body {
    font-size: 0.92rem;
    line-height: 1.55;
}

.comment-body p {
    margin-bottom: 0.7em;
}
.comment-body p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Archive / Category Headers
   ============================================================ */
.archive-header {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-text);
}

.archive-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
}

/* Category archives specifically render the category name in all caps.
   Shared hook so tag + date-archive titles keep their sentence case. */
.archive-title--upper {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.archive-count {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.archive-nav {
    margin: 32px 0;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-heading);
    font-size: 0.85rem;
}

/* ============================================================
   Pagination (index pages)
   ============================================================ */
.pagination {
    margin: 40px 0 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-heading);
    font-size: 0.85rem;
}

.pagination-info {
    color: var(--color-text-muted);
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
    padding: 28px 20px 32px 20px;
    position: relative;
    /* No border-left on the element itself — use ::before so the rule
       starts at the top of the sidebar TEXT (below padding-top) and ends
       at the bottom of the text, never touching the header's dotted rule. */
    border-left: none;
    font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-light);
}
.sidebar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 28px;      /* matches padding-top */
    bottom: 32px;   /* matches padding-bottom */
    border-left: 1px dashed #ddd;
}

.sidebar-section {
    margin-bottom: 24px;
}

.sidebar-section h2 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.sidebar-section a {
    color: var(--color-text-light);
}
.sidebar-section a:hover {
    color: var(--color-link);
}

/* Category list */
.category-list {
    list-style: none;
    padding: 0;
}
.category-list li {
    margin-bottom: 3px;
}

/* Archive date list */
.archive-list {
    list-style: none;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}
.archive-list li {
    margin-bottom: 3px;
}
.archive-list .count {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* Search form */
.search-form {
    display: flex;
    gap: 4px;
}
.search-form input[type="search"] {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-family: var(--font-heading);
    font-size: 0.82rem;
}
.search-form button {
    padding: 4px 10px;
    background: var(--color-header-bg);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    cursor: pointer;
}
.search-form button:hover {
    background: var(--color-border-light);
}

/* ============================================================
   Static Pages
   ============================================================ */
.page-header {
    margin-bottom: 24px;
}

.page-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
}

.page-body {
    font-size: 1rem;
    line-height: var(--line-height);
}

.page-body p {
    margin-bottom: 1em;
}

.page-body img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    margin-top: 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-header-bg);
}

.footer-inner {
    max-width: var(--width-max);
    margin: 0 auto;
    padding: 20px 24px;
    background: var(--color-bg);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
}

.footer-inner a {
    color: var(--color-text-muted);
}

/* Per-blog copyright line (populated from blogs.copyright). Preserves
   user-authored line breaks so multi-line attributions render as
   multiple lines instead of wrapping as a single paragraph. Max-width
   keeps very long copyright text readable on wide screens. */
.site-copyright {
    white-space: pre-line;
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ============================================================
   Reader Stats: visited post indicator
   ============================================================ */
.post-summary.visited .post-title a {
    color: var(--color-text-light);
}
.post-summary.visited .post-title a::after {
    content: ' ✓';
    font-size: 0.7em;
    color: var(--color-text-muted);
}

/* ============================================================
   Image Carousel
   ============================================================ */
.carousel {
    position: relative;
    overflow: hidden;
    margin: 1.5em 0;
    border-radius: 4px;
}

.carousel-track {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.carousel-track img {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    margin: 0;
    cursor: zoom-in;
    display: block;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 1.2rem;
    border-radius: 2px;
    z-index: 1;
}
.carousel-btn:hover {
    background: rgba(0, 0, 0, 0.75);
}
.carousel-btn--prev { left: 8px; }
.carousel-btn--next { right: 8px; }

.carousel-dots {
    text-align: center;
    padding: 8px 0;
}
.carousel-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    margin: 0 3px;
    cursor: pointer;
}
.carousel-dot.active {
    background: var(--color-text-muted);
}

/* ============================================================
   Sidebar — original MT-style sections
   ============================================================ */
.sidebar-heading {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #666;
    margin: 28px 0 10px;
    text-transform: uppercase;
}
.sidebar-section:first-child .sidebar-heading { margin-top: 0; }
.sidebar-section { font-size: 0.88rem; line-height: 1.45; }
.sidebar-section ul { list-style: none; padding: 0; margin: 0; }
.sidebar-section li { padding: 1px 0; }
.sidebar-section p { margin: 0 0 8px; }
.sidebar-section img { max-width: 100%; height: auto; }

/* Prints Available image fills the sidebar (minus padding) at every
   breakpoint. Source HTML often has explicit width attributes from
   the original MT export; without `width: 100%` it stays at its
   stored width and leaves whitespace at the bigger breakpoints
   where the sidebar widens to 400px. The wrapping <a> + <img> from
   the sidebar element's content_html both need to participate so
   the link tracks the image bounds. */
.sidebar-prints a {
    display: block;
    line-height: 0; /* drop baseline whitespace under the image */
}
.sidebar-prints img {
    width: 100%;
    height: auto;
    display: block;
}

.sidebar-portfolio {
    display: flex;
    /* Tighter gap so each column gets more pixels at every
       sidebar width — at the largest breakpoint (sidebar 400px,
       sidebar padding 20px each side, 360px usable) the columns
       gain ~3px each over the previous 14px gap. */
    gap: 8px;
    margin-top: 24px;
}
.sidebar-portfolio .portfolio-col { flex: 1; min-width: 0; text-align: left; }
.sidebar-portfolio .portfolio-col a {
    display: block;
    line-height: 0;
}
.sidebar-portfolio .portfolio-label {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #666;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.sidebar-portfolio img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ccc;
}

.sidebar-cat-list {
    columns: 2;
    column-gap: 16px;
    font-size: 0.85rem;
}
.sidebar-cat-list li { break-inside: avoid; }

.sidebar-archive-list {
    columns: 2;
    column-gap: 12px;
    font-size: 0.8rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-archive-list li { break-inside: avoid; list-style: none; }

.sidebar-favorites-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}
.sidebar-favorites-list li {
    padding: 2px 0;
    list-style: none;
}

.sidebar-search-form input[type="search"] {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.88rem;
    font-family: var(--font-heading);
    background: var(--color-bg);
    box-sizing: border-box;
}
.sidebar-search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--color-link);
}
.sidebar-search-status {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: 6px;
    min-height: 1em;
}
.sidebar-search-results { margin-top: 6px; }
.sidebar-search-result {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text);
    text-decoration: none;
}
.sidebar-search-result:last-child { border-bottom: none; }
.sidebar-search-result:hover { background: rgba(0,0,0,0.03); }
.sidebar-search-result .thumb {
    width: 44px; height: 44px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--color-border-light);
    border-radius: 3px;
}
.sidebar-search-result .info { flex: 1; min-width: 0; }
.sidebar-search-result h4 {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0 0 2px;
    line-height: 1.2;
    color: var(--color-link);
}
.sidebar-search-result .snippet {
    font-size: 0.74rem;
    color: var(--color-text-light);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
}
.sidebar-search-result .date {
    font-family: var(--font-heading);
    font-size: 0.68rem;
    color: var(--color-text-muted);
    margin: 2px 0 0;
}

/* ============================================================
   Responsive
   ============================================================ */

/* Wide screens (≥1400px): enlarge the virtual page so the main text
   column lands around 880px, give the sidebar more room, and bump the
   base font one size. Ordered largest → smallest so the cascade reads
   top-to-bottom. */
@media (min-width: 1400px) {
    :root {
        --width-content: 880px;
        --width-sidebar: 400px;
        --width-max: 1380px;
        --font-size-base: 17px;
    }
    .post-body { font-size: 24px; }
    .post-title { font-size: 22px; }
    .site-title { font-size: 34px; line-height: 44px; }

}

@media (max-width: 920px) {
    :root {
        --width-sidebar: 100%;
    }

    .site-container {
        grid-template-columns: 1fr;
    }

    .sidebar {
        border-left: none;
        border-top: 1px dashed #ddd;
        padding: 24px 20px 28px;
    }

    .content {
        padding: 24px 20px 32px;
    }

    /* Match the content's new 20px horizontal padding so the site
       title and the post title / body share a left edge. Without
       this override the header stays at its default 36px padding
       from 601–920px, creating a visible 16px misalignment between
       the header rule and the content column — visible on a real
       desktop resize and caught during editor-preview QA. */
    .header-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .header-inner::after {
        left: 20px;
        right: 20px;
    }

    .archive-list {
        max-height: none;
    }
}

@media (max-width: 600px) {
    .header-inner {
        padding: 9px 20px 5px;
        gap: 10px;
        align-items: baseline;
    }
    .header-inner::after { left: 20px; right: 20px; }
    .site-title { font-size: 22px; line-height: 28px; }
    .site-nav { font-size: 12px; }
    .site-nav a { margin-left: 10px; }

    .post-title { font-size: 17px; }
    .post-navigation { font-size: 12px; }
}

@media (max-width: 480px) {
    /* Keep header title + nav on a single inline row even on narrow screens */
    .header-inner {
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        padding: 6px 14px 4px;
    }
    .header-inner::after { left: 14px; right: 14px; }
    .site-title { font-size: 16px; line-height: 22px; letter-spacing: 0; }
    .site-nav { font-size: 10px; }
    .site-nav a { margin-left: 6px; }
    .nav-sep { display: none; }  /* the "|" wastes horizontal space on narrow screens */

    /* Match the header's tightened 14px horizontal padding so the
       site title and post content share a left/right edge at the
       narrowest viewport. Without this, content stays at 20px from
       the 920px rule and the user sees the header title sitting
       6px further left than the post body — the misalignment
       called out in the post-merge layout review. */
    .content {
        padding: 18px 14px 24px;
    }

    /* Single-post pages get the same 14px tight horizontal padding
       so the article body lines up with both the site header title
       and the post header. Overrides the 768px rule's 16px above. */
    .post-container {
        padding: 20px 14px 40px;
    }
    .single-post .header-inner {
        padding-left: 14px;
        padding-right: 14px;
    }
    .single-post .header-inner::after {
        left: 14px;
        right: 14px;
    }

    .post-title { font-size: 15px; }

    .pagination {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* ============================================================
   Tag Post List (title-only listing)
   ============================================================ */
.tag-post-list {
    list-style: none;
    padding: 0;
}
.tag-post-list li {
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border-light);
}
.tag-post-list li:last-child {
    border-bottom: none;
}
.tag-post-list a {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
}
.tag-post-date {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-left: 6px;
}

/* ============================================================
   Archive Grid (bottom of index pages)
   ============================================================ */
.archive-grid {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-heading);
    font-size: 0.82rem;
    color: var(--color-text-light);
}

.archive-grid h2 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.archive-year-row {
    margin-bottom: 4px;
    line-height: 1.6;
}

.archive-year-row strong {
    color: var(--color-text);
    font-weight: 700;
}

.archive-year-row a {
    color: var(--color-text-light);
}
.archive-year-row a:hover {
    color: var(--color-link);
}

/* ============================================================
   Single Post Layout (no sidebar, centered reading)
   ============================================================ */
/* Both header and body use the same virtual-page frame so they
   line up exactly, with hairlines down both sides. */
.single-post .header-inner {
    padding: 20px 36px 15px;
}
.single-post .header-inner::after {
    left: 36px;
    right: 36px;
}

.post-container {
    padding: 32px 36px 60px;
    background: transparent;
    min-height: 60vh;
}

.single-post .post-header {
    margin-bottom: 32px;
}

.single-post .post-title {
    font-size: 2rem;
    line-height: 1.2;
}

.single-post .post-body {
    font-size: 1.05rem;
    line-height: 1.7;
}

.single-post .post-body img {
    margin: 1.5em 0;
}

/* Full-bleed images on single posts break out of the column */
.single-post .post-body .full-bleed,
.single-post .post-body img.full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    border-radius: 0;
}

.single-post .post-navigation {
    max-width: 660px;
    margin: 0 auto;
}

.single-post .comments {
    max-width: 660px;
    margin: 0 auto;
}

/* Post footer info (replaces sidebar on single posts) */
.post-footer-info {
    border-top: 2px solid var(--color-border);
    background: var(--color-header-bg);
    margin-top: 0;
}

.post-footer-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 24px;
}

.post-footer-columns {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
        "about    about"
        "subjects search";
    column-gap: 10px;
    row-gap: 24px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-text-light);
}
.footer-about         { grid-area: about; }
.footer-col-subjects  { grid-area: subjects; }
.footer-col-search    {
    grid-area: search;
    padding-left: 40px;
    border-left: 1px solid var(--color-border);
}

/* Embedded strata inside the post footer: strip the centering /
   max-width / top-border the standalone index use adds, since here
   it sits inside an already-sized column. */
.post-footer-columns .archive-strata {
    max-width: none;
    margin: 4px 0 0;
    padding-top: 0;
    border-top: none;
}
.post-footer-columns .archive-strata-masthead {
    display: none;
}

.post-footer-columns h3 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 8px;
    margin-top: 20px;
}

.post-footer-columns h3:first-child {
    margin-top: 0;
}

.post-footer-columns p {
    line-height: 1.5;
    margin-bottom: 8px;
}

.footer-cat-list {
    list-style: none;
    padding: 0;
    columns: 2;
    column-gap: 16px;
}

.footer-cat-list li {
    margin-bottom: 3px;
}

.footer-cat-list a {
    color: var(--color-text-light);
}
.footer-cat-list a:hover {
    color: var(--color-link);
}

.footer-link-list {
    list-style: none;
    padding: 0;
}
.footer-link-list li {
    margin-bottom: 3px;
}

.footer-archive-grid {
    font-size: 0.8rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .post-footer-columns {
        grid-template-columns: 1fr;
        grid-template-areas:
            "about"
            "subjects"
            "search";
        gap: 24px;
    }
    .footer-col-search {
        padding-left: 0;
        border-left: none;
    }

    .single-post .post-title {
        font-size: 1.5rem;
    }

    .post-container {
        padding: 24px 16px 40px;
    }

    /* Match the post-container's 16px horizontal padding so the
       single-post header title and the article body share a left
       and right edge at narrow widths. The default
       `.single-post .header-inner` rule sits at 36px and wins
       against the regular `.header-inner` media-query rule on
       specificity, so without this explicit single-post override
       the header floated 20px to the right of the article body
       at 600-768px. The override is wider than the breakpoint
       (this whole block is `max-width: 768px`) so it cascades
       down through 600px and 480px breakpoints; the 480px rule
       below tightens both sides to 14px. */
    .single-post .header-inner {
        padding-left: 16px;
        padding-right: 16px;
    }
    .single-post .header-inner::after {
        left: 16px;
        right: 16px;
    }
}

/* Wide-screen overrides for post-footer and single-post body. Placed
   AFTER the base definitions so the same-specificity rules win. */
@media (min-width: 1400px) {
    /* One more type step up for the article body on big screens. */
    .single-post .post-body { font-size: 19px; line-height: 1.75; }

    /* Widen the post footer to use the extra horizontal room, then
       give the archive (right) column roughly 2× the subjects column
       so the month chart has more horizontal breathing space.
       The subjects list on the left stays narrow and is unaffected. */
    .post-footer-inner { max-width: 1160px; }
    .post-footer-columns { grid-template-columns: 1fr 2fr; }
}

/* ============================================================
   Post Summary (index / category / archive listings)
   ============================================================ */
/* Light hairline border + 4px padding on images in index-style listings.
   Subtle hover highlights the border. */
.post-summary .post-body img {
    padding: 4px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 0;
    transition: border-color 0.15s ease;
    cursor: zoom-in;
}
.post-summary .post-body img:hover {
    border-color: #888;
}
/* Full-bleed images keep no border */
.post-summary .post-body img.full-bleed {
    padding: 0;
    border: none;
}

/* Footer meta: 10:52 PM · ADD A COMMENT · FILED UNDER: CATEGORY */
.post-summary .post-meta {
    margin-top: 18px;
    padding-bottom: 0;
}
.post-summary .post-info {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 400;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
.post-summary .post-info .meta-time {
    color: #999;
}
.post-summary .post-info .dot {
    margin: 0 6px;
    color: #999;
}
.post-summary .post-info .meta-link {
    color: #6a8a9e;
    text-decoration: none;
}
.post-summary .post-info .meta-link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}
.post-summary .post-info .meta-link:visited {
    color: #6a8a9e;
}

/* Dotted separator between stacked post summaries — placed AFTER each
   summary so it reads as "post ends, then rule, then next post". Uses
   the same wider-spaced dot pattern as the header rule. */
.post-summary {
    margin-bottom: 0;
    padding-bottom: 28px;
    position: relative;
}
.post-summary + .post-summary {
    padding-top: 28px;
}
.post-summary + .post-summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-image: linear-gradient(to right, #999 2px, transparent 2px);
    background-size: 8px 1px;
    background-repeat: repeat-x;
}

/* ============================================================
   Print
   ============================================================ */
@media print {
    .site-header,
    .site-footer,
    .sidebar,
    .post-navigation,
    .pagination,
    .comments,
    .search-form {
        display: none;
    }

    .site-container {
        display: block;
    }

    .post-body img {
        max-width: 4in;
    }
}

/* Dead media placeholder — replaces legacy <embed>/<object> tags */
.dead-media {
    border: 1px dashed #bbb;
    border-radius: 6px;
    background: #f8f8f8;
    padding: 20px;
    margin: 16px 0;
    text-align: center;
}

.dead-media-label {
    color: #888;
    font-size: 14px;
    font-style: italic;
    margin: 0;
}

/* --- Sidebar: RSS subscribe link --- */
.rss-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.rss-link .rss-icon {
    color: #ee802f;
    flex-shrink: 0;
}

/* --- Sidebar: Portfolio + Instagram 2-column block --- */
.portfolio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 6px;
}
.portfolio-col h4 {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    margin: 0 0 6px;
    letter-spacing: 0.05em;
}
.portfolio-col img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- PDF embed: thumbnail + download link --- */
.pdf-embed {
    margin: 16px 0;
    text-align: center;
}
.pdf-embed .pdf-download {
    display: inline-block;
    text-decoration: none;
    border: 1px solid var(--color-border-light, #ccc);
    border-radius: 4px;
    padding: 8px;
    background: #fafafa;
}
.pdf-embed .pdf-download img {
    max-width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.pdf-embed .pdf-download-label {
    display: block;
    margin-top: 6px;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: var(--color-link, #36c);
}

/* --- Numbered page list under the main Newer/Older pagination --- */
.pagination-numbered {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    justify-content: center;
    margin: 12px 0 24px;
    font-size: 0.95rem;
}
.pagination-numbered a,
.pagination-numbered strong {
    padding: 2px 4px;
}
.pagination-numbered strong {
    color: var(--color-text);
}

/* ============================================================
   Ribbon slider — replaces the prev/next + numbered pagination.
   Compact horizontal rail with a thumb that follows the current
   page. Hovering the thumb surfaces a date-range label above; the
   "Page N of M" label blinks below while dragging. Colors all
   derive from the blog palette so category-hover, link-visited,
   and accent changes propagate automatically.
   ============================================================ */
.ribbon {
    max-width: var(--width-content, 544px);
    /* Extra margin-top replaces the old hairline rule — the italic
       date-range label floats above the thumb and was clipping into
       the hairline. Empty vertical space reads cleaner than a line
       here, since the preceding post already terminates on its own
       meta row. */
    margin: 56px auto 24px;
    padding: 28px 4px 0;
}
.ribbon-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
}
.ribbon-step {
    background: none;
    border: none;
    padding: 6px 4px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-link);
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s ease;
}
.ribbon-step:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}
.ribbon-step.is-disabled {
    color: var(--color-text-muted);
    cursor: default;
    pointer-events: none;
}

.ribbon .rail-wrap {
    position: relative;
    padding: 18px 10px;
}
.ribbon .rail {
    position: relative;
    height: 2px;
    background: var(--color-border);
    border-radius: 1px;
}
.ribbon .thumb {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-link);
    /* No ring — pure solid color matching the link accent. */
    border: none;
    cursor: grab;
    transition: background 0.12s ease, transform 0.12s ease;
    will-change: left;
    display: block;
    /* Override the global <a> underline-on-hover */
    text-decoration: none;
}
.ribbon .thumb:hover {
    transform: translate(-50%, -50%) scale(1.12);
    text-decoration: none;
}
.ribbon .thumb.is-active,
.ribbon .thumb:active {
    background: var(--color-link-hover);
    cursor: grabbing;
}
.ribbon .thumb:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 3px;
}

.ribbon .tip {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, calc(-50% - 26px));
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--color-text-light);
    white-space: nowrap;
    pointer-events: none;
    transition: left 0.12s ease-out, color 0.12s ease;
}
.ribbon .tip.is-active { color: var(--color-link-hover); }

.ribbon .pagenum {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, calc(-50% + 22px));
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, left 0.12s ease-out;
}
.ribbon .pagenum.is-visible { opacity: 1; }

/* ============================================================
   Archive strata — horizon chart of years × months. One row per
   year from newest to oldest (including empty years as dim
   rows); each row is a 12-column grid of tick cells. Months with
   posts are anchor-tinted and expand on row hover to surface the
   short month label; empty months stay as faint placeholders.
   ============================================================ */
.archive-strata {
    --strata-row-h: 22px;
    --strata-row-gap: 1px;
    --strata-bar-h: 12px;
    --strata-bar-h-open: 30px;
    --strata-year-w: 3.25rem;
    --strata-col-gap: 1rem;

    max-width: var(--width-content, 544px);
    margin: 28px auto 40px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

/* Section masthead above the horizon: title, year range, sound
   toggle. Mirrors the prototype but uses the blog's fonts + links. */
.archive-strata-masthead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 1rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--color-text);
}
.archive-strata-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-style: italic;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    color: var(--color-text);
    line-height: 1;
}
.archive-strata-range {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

/* Toggle row below the chart — right-aligned on the index (standalone
   strata); left-aligned when the strata is embedded in the post footer
   so the button sits under the chart column. */
.archive-strata-toggle-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border-light);
}
.post-footer-columns .archive-strata-toggle-row {
    justify-content: flex-end;
    border-top: none;
    padding-top: 0;
    margin-top: 0.5rem;
}

/* Sound toggle. Circular ghost button; fills to link-hover when
   the toggle is on (aria-pressed="true"). */
.strata-sound-toggle {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.strata-sound-toggle:hover {
    color: var(--color-text);
    border-color: var(--color-text);
}
.strata-sound-toggle:active { transform: scale(0.92); }
.strata-sound-toggle[aria-pressed="true"] {
    color: var(--color-bg);
    background: var(--color-link-hover);
    border-color: var(--color-link-hover);
}
.strata-sound-toggle .icon-on { display: none; }
.strata-sound-toggle[aria-pressed="true"] .icon-off { display: none; }
.strata-sound-toggle[aria-pressed="true"] .icon-on { display: block; }

.archive-strata-head {
    display: grid;
    grid-template-columns: var(--strata-year-w) 1fr;
    align-items: center;
    column-gap: var(--strata-col-gap);
    padding: 0 0 0.5rem 0;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-text);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-light);
}
.archive-strata-head .strata-year-col {
    text-align: right;
    padding-right: 0.25rem;
}
.archive-strata-head .strata-months {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
}
.archive-strata-head .strata-months span { text-align: center; }

.strata-body {
    display: flex;
    flex-direction: column;
    gap: var(--strata-row-gap);
    position: relative;
}

.strata-row {
    height: var(--strata-row-h);
    position: relative;
    transition: opacity 0.25s ease;
}
/* Inner sits absolutely so a row's expansion grows from the
   center and doesn't shove siblings around. */
.strata-inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    grid-template-columns: var(--strata-year-w) 1fr;
    align-items: center;
    column-gap: var(--strata-col-gap);
    height: var(--strata-row-h);
    transition: height 0.3s cubic-bezier(.2,.7,.2,1);
    z-index: 1;
}
.strata-row:hover { z-index: 5; }
.strata-row:hover .strata-inner {
    height: calc(var(--strata-bar-h-open) + 10px);
    z-index: 5;
}
/* Dim non-hovered rows so the focused one reads as forward */
.strata-body:hover .strata-row:not(:hover) { opacity: 0.55; }

.strata-year {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: right;
    color: var(--color-text);
    transition: color 0.3s ease, font-size 0.3s ease, font-style 0.3s ease;
    padding-right: 0.25rem;
    line-height: 1;
}
.strata-row:hover .strata-year {
    color: var(--color-link);
    font-style: italic;
    font-size: 1.15rem;
}
/* Empty rows — no posts that year. Rendered as a dim placeholder
   so the horizon is visually contiguous. */
.strata-row.empty .strata-year {
    color: var(--color-text-muted);
    font-weight: 400;
}
.strata-row.empty:hover .strata-year {
    color: var(--color-text-light);
    font-style: italic;
}

.strata-bar {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
    height: var(--strata-bar-h);
    transition: height 0.3s cubic-bezier(.2,.7,.2,1);
}
.strata-row:hover .strata-bar {
    height: var(--strata-bar-h-open);
}

.strata-tick {
    background: var(--color-border-light);
    position: relative;
    transition: background 0.2s ease, transform 0.15s ease;
    border-radius: 1px;
    overflow: hidden;
    display: block;
    text-decoration: none;
}
.strata-tick.on {
    background: var(--color-text);
    cursor: pointer;
}
.strata-tick.on:hover {
    background: var(--color-link-hover);
}
.strata-tick.on:active {
    transform: scaleY(0.85);
}
.strata-tick .lbl {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-bg);
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.2s ease 0.08s, transform 0.2s ease 0.08s;
    pointer-events: none;
    line-height: 1;
}
.strata-row:hover .strata-tick.on .lbl {
    opacity: 1;
    transform: translateY(0);
}
/* Visited state matches the rest of the site — posts you've
   opened recently fade that month's tick a touch. */
.strata-tick.on:visited {
    background: var(--color-link-visited);
}

@media (max-width: 600px) {
    .archive-strata {
        --strata-row-h: 20px;
        --strata-bar-h: 11px;
        --strata-bar-h-open: 26px;
        --strata-year-w: 2.75rem;
        --strata-col-gap: 0.75rem;
    }
    .archive-strata-head { font-size: 0.5rem; }
    .strata-year { font-size: 0.85rem; }
    .ribbon-row { gap: 10px; }
    .ribbon-step { font-size: 0.75rem; }
}

/* ============================================================
   Search page — full-width search form and results list inside
   the standard base.html chrome (sidebar visible, white content
   column, themed page background around it).
   ============================================================ */
.search-page-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 20px;
}
.search-page-form {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
}
.search-page-form input[type="search"] {
    flex: 1;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 1rem;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg);
}
.search-page-form input[type="search"]:focus {
    outline: none;
    border-color: var(--color-link);
}
.search-page-form button {
    padding: 10px 20px;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    background: var(--color-text);
    color: var(--color-bg);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.search-page-form button:hover {
    background: var(--color-link);
}
/* Each result is a single <a> so clicking anywhere navigates. Flex row
   puts the thumb (order:2) on the right; text fills the remaining
   column. Card gets a subtle hover background so the hover target is
   unambiguous. */
a.search-result {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
a.search-result:hover,
a.search-result:focus-visible {
    background-color: var(--color-header-bg);
    outline: none;
    text-decoration: none;
}
.search-result-body {
    flex: 1;
    min-width: 0;
}
.search-result-thumb {
    order: 2;
    width: 120px;
    height: 90px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 2px;
    background: var(--color-border-light);
}
.search-result-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #252525;
    margin: 0 0 4px;
    line-height: 1.3;
}
a.search-result:hover .search-result-title {
    color: var(--color-link);
}
.search-result .search-snippet {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin: 0;
}
.search-result .search-snippet mark {
    background: var(--color-highlight);
    padding: 1px 2px;
}
.search-result .search-meta {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 6px 0 0;
}

@media (max-width: 520px) {
    .search-result-thumb {
        width: 80px;
        height: 60px;
    }
}
#search-status {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}