/*
Theme Name: Obsidian Bind MX
Theme URI:
Author: slave mx
Author URI: https://slave.mx
Description: The slave.mx main-site theme. Dark and light follow the MX Control Portal's Version 12 look (ink and cream, one oxblood accent, soft edges); Geocities mode keeps its 1990s look.
Version: 7.2.2
Requires at least: 6.0
Requires PHP: 7.4
License: CC BY-NC-ND 4.0
License URI: https://creativecommons.org/licenses/by-nc-nd/4.0/
Text Domain: obsidian-bind-mx
Tags: blog, portfolio, dark-mode, retro

How the three modes are drawn (7.0.0)
- Dark and light: this file. Dark is the plain page; light adds body.light-mode.
- Geocities: css/geocities-base.css (the 6.3.3 stylesheet, unchanged) and css/geocities.css. This file is
  switched off while Geocities is on (js/theme-toggle.js and functions.php), so nothing here can change it.

Contents
1. Colours, type and sizes (dark, then light)
2. Page basics
3. Header and its buttons
4. Menu (full screen)
5. Post cards
6. A post or page: the picture card and the words
7. Comments
8. Search
9. Related posts
10. Lightbox, gallery, sidebar, footer, loading line
11. Phones
12. Less motion
*/

/* 1. Colours, type and sizes ------------------------------------------------------------------------------
   The same tokens as the portal (MX Control Portal 12.1.0). The Customizer's colours and fonts are laid over
   these by functions.php only when Master has picked something other than the defaults. */
@font-face {
    font-family: 'Manrope';
    src: url('fonts/manrope-var.woff') format('woff');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --ob-bg: #17161A;            /* ink */
    --ob-surface: #211F24;       /* cards */
    --ob-surface-2: #2A282E;     /* things inside cards */
    --ob-surface-3: #34323A;     /* hover */
    --ob-edge: #3A373F;          /* the soft hairline */
    --ob-side: #1D1C21;          /* the menu */
    --ob-field: #17161A;         /* text boxes */
    --ob-glass: rgba(23, 22, 26, 0.86);
    --ob-bar: rgba(23, 22, 26, 0.72);     /* 7.2.2: the header bar once you scroll, a little more see-through */
    --ob-text: #F5F2EC;          /* cream: 14.6:1 on a card */
    --ob-text-2: #D9D4CC;
    --ob-text-3: #B3ADA5;        /* quiet words: 7.3:1 on a card */
    --ob-act: #B8434C;           /* oxblood */
    --ob-act-hover: #9E3640;
    --ob-on-act: #F5F2EC;
    --ob-act-text: #EC9EA3;      /* oxblood words on dark: 7.8:1 on a card */
    --ob-act-soft: rgba(184, 67, 76, 0.22);
    --ob-gold: #C9A86A;          /* soft brass */
    --ob-gold-text: #D8BC84;
    --ob-gold-soft: rgba(201, 168, 106, 0.14);
    --ob-shadow: none;
    --ob-shadow-lift: 0 8px 20px rgba(0, 0, 0, 0.5);
    --ob-scrim: rgba(23, 22, 26, 0.72); /* behind words laid on a picture */
    --ob-ring: 0 0 0 2px var(--ob-bg), 0 0 0 4px var(--ob-act-text);

    --ob-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ob-font-head: var(--ob-font);

    --ob-r: 12px;
    --ob-r-xl: 18px;
    --ob-r-lg: 22px;
    --ob-pill: 999px;
    --ob-tap: 44px;
    --ob-wrap: 1100px;
    --ob-read: 720px;
    --ob-head: 76px;
    --ob-gap: clamp(1rem, 3vw, 2rem);
}

body.light-mode {
    color-scheme: light;
    --ob-bg: #F5F2EC;            /* cream */
    --ob-surface: #FFFDF9;
    --ob-surface-2: #FFFFFF;
    --ob-surface-3: #EFEAE2;
    --ob-edge: #D2CBC0;
    --ob-side: #FFFDF9;
    --ob-field: #FFFFFF;
    --ob-glass: rgba(245, 242, 236, 0.88);
    --ob-bar: rgba(245, 242, 236, 0.74);
    --ob-text: #17161A;
    --ob-text-2: #3D3A36;
    --ob-text-3: #5E5A55;        /* 6.7:1 on a card */
    --ob-act: #8E2A33;
    --ob-act-hover: #74212A;
    --ob-on-act: #FFFDF9;
    --ob-act-text: #8E2A33;      /* 8.2:1 on a card */
    --ob-act-soft: #F3E1DF;
    --ob-gold: #B8913F;
    --ob-gold-text: #7A5A1E;
    --ob-gold-soft: #F3EAD6;
    --ob-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 18px rgba(0, 0, 0, 0.06);
    --ob-shadow-lift: 0 10px 28px rgba(23, 22, 26, 0.14);
    --ob-scrim: rgba(255, 253, 249, 0.82);
}

/* 2. Page basics ------------------------------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
    background: var(--ob-bg);
}

html:has(> body.light-mode) {
    background: #F5F2EC;
}

body {
    margin: 0;
    padding-top: calc(var(--ob-head) + 1.5rem);
    background: var(--ob-bg);
    color: var(--ob-text-2);
    font-family: var(--ob-font);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.single,
body.page {
    padding-top: var(--ob-head);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ob-font-head);
    color: var(--ob-text);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

a {
    color: var(--ob-act-text);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

a:hover {
    color: var(--ob-text);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Jumping to a part of the page (comments, a heading) stops below the header */
[id] {
    scroll-margin-top: calc(var(--ob-head) + 1rem);
}

:focus-visible {
    outline: none;
    box-shadow: var(--ob-ring);
}

::selection {
    background: var(--ob-act-soft);
    color: var(--ob-text);
}

.container {
    max-width: var(--ob-wrap);
    margin: 0 auto;
    padding: 0 var(--ob-gap);
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    clip: auto !important;
    clip-path: none;
    height: auto;
    width: auto;
    top: 8px;
    left: 8px;
    z-index: 100000;
    padding: 12px 20px;
    border-radius: var(--ob-pill);
    background: var(--ob-act);
    color: var(--ob-on-act);
    font-weight: 600;
    text-decoration: none;
}

/* Geocities-only parts never show in dark or light */
.retro-marquee-container,
.retro-button-left,
.retro-button-right,
.retro-hit-counter,
.mouse-trail-particle {
    display: none !important;
}

/* The line icons (Lucide, ISC licence: fonts/LICENSE-lucide.txt). The emoji are Geocities mode's. */
.ob-i {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.search-icon,
.theme-toggle .icon,
.menu-icon {
    display: none;
}

/* Buttons: one shape everywhere. Filled oxblood for the main action, outlined for the rest. */
.submit-btn,
.comment-form .submit,
.search-submit,
#toggle-comments-btn,
.read-more-link,
.wp-block-button__link,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--ob-tap);
    padding: 0 1.4rem;
    border-radius: var(--ob-pill);
    font-family: var(--ob-font);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.submit-btn,
.comment-form .submit,
.search-submit,
.wp-block-button__link,
.button {
    background: var(--ob-act);
    color: var(--ob-on-act);
    border: 1px solid var(--ob-act);
}

.submit-btn:hover,
.comment-form .submit:hover,
.search-submit:hover,
.wp-block-button__link:hover,
.button:hover {
    background: var(--ob-act-hover);
    border-color: var(--ob-act-hover);
    color: var(--ob-on-act);
}

#toggle-comments-btn {
    background: transparent;
    color: var(--ob-text);
    border: 1px solid var(--ob-edge);
}

#toggle-comments-btn:hover,
#toggle-comments-btn.active {
    background: var(--ob-surface-2);
}

/* 3. Header and its buttons ------------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    height: var(--ob-head);
    display: flex;
    align-items: center;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

body.admin-bar .site-header {
    top: 32px;
}

.site-header.scrolled {
    background: var(--ob-bar);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    border-bottom-color: var(--ob-edge);
}

body.menu-open .site-header {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
}

.site-header {
    align-items: flex-start;
}

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 1rem;
    width: 100%;
    max-width: var(--ob-wrap);
    margin: 0 auto;
    padding: 0 var(--ob-gap);
}

.header-controls-left {
    justify-self: start;
    height: var(--ob-head);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.menu-actions {
    justify-self: end;
    height: var(--ob-head);
    display: flex;
    align-items: center;
}

/* Round icon buttons (search, the look) and the Menu pill */
.search-toggle,
.theme-toggle,
.menu-toggle,
.menu-close,
.search-close,
.carousel-nav,
#obsidian-lightbox .lightbox-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--ob-tap);
    min-width: var(--ob-tap);
    margin: 0;
    padding: 0;
    border: 1px solid var(--ob-edge);
    border-radius: var(--ob-pill);
    background: transparent;
    color: var(--ob-text);
    font-family: var(--ob-font);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.site-header:not(.scrolled) .search-toggle,
.site-header:not(.scrolled) .theme-toggle,
.site-header:not(.scrolled) .menu-toggle {
    background: var(--ob-glass);
}

.search-toggle:hover,
.theme-toggle:hover,
.menu-toggle:hover,
.menu-close:hover,
.search-close:hover,
.carousel-nav:hover,
#obsidian-lightbox .lightbox-close:hover {
    background: var(--ob-surface-3);
    color: var(--ob-text);
}

.menu-toggle,
.menu-close {
    padding: 0 1.1rem 0 0.95rem;
}

.menu-close,
body.menu-open .menu-toggle {
    display: none;
}

body.menu-open .menu-close {
    display: inline-flex;
}

/* The look button: dark ↔ light, showing the look you get next (7.2.0; 90s mode is in the footer) */
.theme-toggle .ob-i {
    display: none;
}

.theme-toggle .ob-i-next-light {
    display: block;
}

body.light-mode .theme-toggle .ob-i-next-light {
    display: none;
}

body.light-mode .theme-toggle .ob-i-next-dark {
    display: block;
}

/* The name or logo in the middle (7.2.1): at the top of the page it sits in a frosted box that hangs from the top
   edge and reaches a little over the picture below; once you scroll, the box melts into the header bar. */
.site-branding {
    justify-self: center;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: calc(var(--ob-head) + 2.25rem);
    padding: 0 2.25rem;
    background: var(--ob-glass);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--ob-edge);
    border-top: 0;
    border-radius: 0 0 var(--ob-r-xl) var(--ob-r-xl);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.light-mode .site-branding {
    box-shadow: 0 10px 28px rgba(23, 22, 26, 0.10);
}

.site-header.scrolled .site-branding,
body.menu-open .site-branding {
    height: var(--ob-head);
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
}

.site-title {
    margin: 0;
    font-size: 1.375rem;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 800;
}

.site-title a {
    color: var(--ob-text);
}

.site-title a:hover {
    color: var(--ob-act-text);
}

.ob-logos {
    display: flex;
    align-items: center;
}

.ob-logo {
    display: block;
    max-height: 48px;
    width: auto;
    margin: 0;
}

/* Each look shows its own logo (one logo only: it shows in both) */
.ob-logo-light,
body.light-mode .ob-logo-dark {
    display: none;
}

body.light-mode .ob-logo-light,
.ob-logo-one .ob-logo {
    display: block;
}

/* With a logo, the site name is still there for screen readers and search engines */
.ob-has-logo .site-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The line along the header's foot that fills as you read */
.reading-progress-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    pointer-events: none;
}

.reading-progress-bar {
    height: 100%;
    width: 0;
    background: var(--ob-act);
    border-radius: 0 2px 2px 0;
    transition: width 0.1s linear;
}

/* 4. Menu (full screen) ----------------------------------------------------------------------------------- */
.overlay-navigation {
    position: fixed;
    inset: 0;
    z-index: 1999;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--ob-head) + 3rem) var(--ob-gap) 4rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    background: var(--ob-side);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.overlay-navigation::-webkit-scrollbar {
    display: none;
}

.overlay-navigation.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.menu-open {
    overflow: hidden;
}

.overlay-content {
    width: 100%;
    max-width: 520px;
}

.overlay-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.overlay-navigation a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0.5rem 1.4rem;
    border-radius: var(--ob-pill);
    color: var(--ob-text-2);
    font-family: var(--ob-font-head);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.overlay-navigation a:hover {
    background: var(--ob-surface-2);
    color: var(--ob-text);
}

.overlay-navigation .current-menu-item > a,
.overlay-navigation .current_page_item > a,
.overlay-navigation .current-menu-parent > a {
    background: var(--ob-act-soft);
    color: var(--ob-text);
}

/* Pages under a menu item sit under it, a little in (no hover-only menus) */
.overlay-navigation ul ul {
    margin: 0.25rem 0 0.5rem 1.4rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--ob-edge);
    gap: 0;
}

.overlay-navigation ul ul a {
    min-height: 44px;
    font-size: 1.0625rem;
    color: var(--ob-text-3);
}

.menu-scroll-indicator {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2001;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.menu-scroll-indicator.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--ob-edge);
    background: var(--ob-surface);
    color: var(--ob-text-2);
    font-size: 1.1rem;
}

/* 5. Post cards ------------------------------------------------------------------------------------------- */
.site-main > p {
    color: var(--ob-text-3);
    text-align: center;
    padding: 4rem 0;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--ob-gap);
    padding: 1rem 0 3rem;
}

@media (min-width: 1024px) {
    .posts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ob-surface);
    border: 1px solid transparent;
    border-radius: var(--ob-r-lg);
    box-shadow: var(--ob-shadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.light-mode .post-card {
    border-color: var(--ob-edge);
}

.post-card:hover {
    border-color: var(--ob-edge);
    box-shadow: var(--ob-shadow-lift);
}

.post-thumbnail {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--ob-surface-2);
}

.post-thumbnail > a {
    display: block;
    height: 100%;
}

.post-thumbnail img,
.no-thumb-placeholder.placeholder-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.no-thumb-placeholder.placeholder-image {
    background-size: cover;
    background-position: center;
}

.post-card:hover .post-thumbnail img,
.post-card:hover .no-thumb-placeholder.placeholder-image {
    transform: scale(1.03);
}

/* Video, audio and gallery posts without a picture */
.no-thumb-placeholder:not(.placeholder-image) {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ob-text-3);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

/* The small mark on a video, audio or gallery picture */
.post-thumbnail > .play-icon,
.post-thumbnail > .audio-icon,
.post-thumbnail > .gallery-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ob-scrim);
    color: var(--ob-text);
    font-size: 1.25rem;
    pointer-events: none;
}

.post-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.4rem 1.5rem 1.5rem;
}

.post-title {
    margin: 0 0 0.6rem;
    font-size: 1.3125rem;
    line-height: 1.3;
}

.post-title a {
    color: var(--ob-text);
}

.post-title a:hover {
    color: var(--ob-act-text);
}

.post-excerpt {
    flex-grow: 1;
    margin-bottom: 1rem;
    color: var(--ob-text-3);
    font-size: 0.9375rem;
    line-height: 1.65;
}

.post-excerpt p {
    margin: 0;
}

/* The date or kind: a small capital line on a soft pill, laid on the picture */
.format-indicator {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 2;
    padding: 0.3rem 0.75rem;
    border-radius: var(--ob-pill);
    background: var(--ob-scrim);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--ob-text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* On image, video, audio and gallery posts the kind sits with the words: a small brass line over the title */
.post-content .format-indicator {
    position: static;
    order: -1;
    align-self: flex-start;
    margin-bottom: 0.7rem;
    background: var(--ob-gold-soft);
    color: var(--ob-gold-text);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.read-more-link {
    align-self: flex-start;
    min-height: 40px;
    margin-left: -0.9rem;
    padding: 0 0.9rem;
    background: transparent;
    color: var(--ob-act-text);
    border: 0;
}

.read-more-link:hover {
    background: var(--ob-act-soft);
    color: var(--ob-act-text);
}

.post-card.fade-in {
    animation: ob-rise 0.4s ease both;
}

@keyframes ob-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Loading more posts */
.page-load-status {
    width: 100%;
    margin: 0 0 3rem;
    text-align: center;
    color: var(--ob-text-3);
    font-size: 0.875rem;
}

.page-load-status p {
    margin: 0;
}

/* 6. A post or page --------------------------------------------------------------------------------------- */
article.post,
article.page {
    margin-top: 0;
}

.hero-header.glassmorphic-header {
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: center;
    padding: 1.25rem var(--ob-gap) 0;
}

/* The picture again, blurred, behind the header, the card and the start of the words (7.2.1: as rich as 6.x).
   It reaches well below the card and fades out softly, so it never ends in a hard line, even while it drifts
   down with the parallax (js/visual-effects.js). Nothing clips it: the page itself hides what spills sideways. */
.hero-bg-blurred {
    position: absolute;
    top: calc(-1 * var(--ob-head) - 40px);
    left: -40px;
    right: -40px;
    height: calc(100% + var(--ob-head) + 320px);
    z-index: -1;
    background-color: transparent;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.8) saturate(1.2);
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);
    pointer-events: none;
    will-change: transform;
}

body.light-mode .hero-bg-blurred {
    filter: blur(20px) brightness(1.15) saturate(1.2);
    /* fades out sooner than in dark, so dark words below the card sit on cream, not on the picture's colour */
    -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 72%);
    mask-image: linear-gradient(to bottom, #000 35%, transparent 72%);
}

/* The words sit over the end of the blur */
.single-post-container,
.related-content-section {
    position: relative;
    z-index: 1;
}

.hero-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 8;
    max-height: 540px;
    overflow: hidden;
    border-radius: var(--ob-r-lg);
    background: var(--ob-surface);
    box-shadow: var(--ob-shadow-lift);
    animation: ob-rise 0.5s ease both;
}

/* A post with no picture at all: just the title card */
.hero-card:not(:has(.card-image)) {
    aspect-ratio: auto;
    min-height: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.card-image,
.card-image a,
.card-image img {
    display: block;
    width: 100%;
    height: 100%;
}

.card-image {
    position: absolute;
    inset: 0;
}

.card-image img {
    object-fit: cover;
    transition: transform 0.6s ease;
}

.hero-card:hover .card-image img {
    transform: scale(1.02);
}

.card-content {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 2;
    width: max-content;
    max-width: calc(100% - 3rem);
    padding: 1.1rem 2rem 1.2rem;
    border-radius: var(--ob-r-xl);
    background: var(--ob-scrim);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    text-align: center;
}

.hero-card:not(:has(.card-image)) .card-content {
    position: static;
    transform: none;
    margin: 1.5rem auto 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.hero-title {
    margin: 0;
    color: var(--ob-text);
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
    line-height: 1.15;
}

.hero-title--medium {
    font-size: clamp(1.375rem, 2.8vw, 2rem);
}

.hero-title--small {
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
}

.hero-title--xsmall {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
}

.hero-meta {
    margin-top: 0.5rem;
    color: var(--ob-gold-text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.single-post-container {
    max-width: calc(var(--ob-read) + 2 * var(--ob-gap));
    margin: 0 auto;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

@media (min-width: 1024px) {
    .single-post-container.has-sidebar {
        display: grid;
        grid-template-columns: 1fr 280px;
        gap: 3rem;
        max-width: var(--ob-wrap);
    }
}

/* The words */
.entry-content {
    color: var(--ob-text-2);
    font-size: 1.0625rem;
    line-height: 1.8;
    overflow-wrap: break-word;
}

.entry-content > * {
    margin-top: 0;
    margin-bottom: 1.4em;
}

.entry-content h2 {
    margin-top: 2.2em;
    margin-bottom: 0.6em;
    font-size: 1.5rem;
}

.entry-content h3 {
    margin-top: 1.8em;
    margin-bottom: 0.5em;
    font-size: 1.2rem;
}

.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-top: 1.6em;
    margin-bottom: 0.4em;
    font-size: 1rem;
}

.entry-content a {
    color: var(--ob-act-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.entry-content a:hover {
    text-decoration-color: currentColor;
}

.entry-content strong,
.entry-content b {
    color: var(--ob-text);
    font-weight: 700;
}

.entry-content ul,
.entry-content ol {
    padding-left: 1.4em;
}

.entry-content li {
    margin-bottom: 0.35em;
}

.entry-content li::marker {
    color: var(--ob-text-3);
}

.entry-content blockquote {
    margin-left: 0;
    margin-right: 0;
    padding: 0.2em 0 0.2em 1.4em;
    border-left: 3px solid var(--ob-act);
    color: var(--ob-text);
    font-size: 1.125rem;
}

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.entry-content img {
    border-radius: var(--ob-r-xl);
}

.entry-content figure {
    margin-left: 0;
    margin-right: 0;
}

.entry-content figcaption,
.wp-caption-text {
    margin-top: 0.5rem;
    color: var(--ob-text-3);
    font-size: 0.875rem;
    text-align: center;
}

.entry-content code,
.entry-content kbd {
    padding: 0.15em 0.45em;
    border-radius: 6px;
    background: var(--ob-surface-2);
    color: var(--ob-text);
    font-size: 0.875em;
}

.entry-content pre {
    padding: 1rem 1.25rem;
    border-radius: var(--ob-r);
    background: var(--ob-surface);
    border: 1px solid var(--ob-edge);
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.6;
}

.entry-content pre code {
    padding: 0;
    background: none;
}

.entry-content hr {
    border: 0;
    border-top: 1px solid var(--ob-edge);
    margin: 2.5em 0;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.entry-content th,
.entry-content td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--ob-edge);
    text-align: left;
}

.entry-content th {
    color: var(--ob-text);
}

.entry-content iframe,
.entry-content video {
    max-width: 100%;
    border-radius: var(--ob-r-xl);
}

.page-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: var(--ob-text-3);
}

.entry-footer {
    font-size: 0.875rem;
}

.edit-link a {
    color: var(--ob-text-3);
}

/* 7. Comments --------------------------------------------------------------------------------------------- */
.comments-toggle-container {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ob-edge);
    text-align: center;
}

#toggle-comments-btn .btn-icon {
    font-size: 0;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.25s ease;
}

.hidden-comments {
    display: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    padding-top: 2rem;
}

.comments-title {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    text-align: center;
}

.comment-list,
.comment-list .children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment-list .children {
    margin-left: 1.5rem;
}

.comment-list li.comment {
    margin-bottom: 0.75rem;
}

.comment-body {
    position: relative;
    padding: 1.2rem 1.25rem 1.2rem 4.75rem;
    border-radius: var(--ob-r-xl);
    background: var(--ob-surface);
    border: 1px solid transparent;
}

body.light-mode .comment-body {
    border-color: var(--ob-edge);
}

.comment-author {
    color: var(--ob-text);
    font-weight: 700;
}

.comment-author .says {
    display: none;
}

.comment-author .avatar {
    position: absolute;
    left: 1.25rem;
    top: 1.2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.comment-metadata,
.comment-metadata a {
    color: var(--ob-text-3);
    font-size: 0.8125rem;
}

.comment-content {
    color: var(--ob-text-2);
}

.comment-content p {
    margin: 0.5rem 0;
}

.comment-reply-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 0.9rem;
    margin-left: -0.9rem;
    border-radius: var(--ob-pill);
    color: var(--ob-act-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.comment-reply-link:hover {
    background: var(--ob-act-soft);
    color: var(--ob-act-text);
}

.comment-respond {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: var(--ob-r-lg);
    background: var(--ob-surface);
    border: 1px solid transparent;
}

body.light-mode .comment-respond {
    border-color: var(--ob-edge);
}

.comment-reply-title {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
}

.comment-reply-title small {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.comment-notes,
.logged-in-as,
.comment-form-cookies-consent label {
    color: var(--ob-text-3);
    font-size: 0.875rem;
}

.comment-form p {
    margin: 0 0 1rem;
}

.comment-form label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--ob-text-2);
    font-size: 0.875rem;
    font-weight: 600;
}

.comment-form-cookies-consent {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.comment-form-cookies-consent label {
    display: inline;
    font-weight: 400;
    margin: 0;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-container input[type="search"],
.widget input[type="search"],
.widget input[type="text"] {
    width: 100%;
    min-height: var(--ob-tap);
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--ob-edge);
    border-radius: var(--ob-pill);
    background: var(--ob-field);
    color: var(--ob-text);
    font-family: var(--ob-font);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-form textarea {
    border-radius: var(--ob-r-xl);
    min-height: 140px;
    resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus,
.search-container input[type="search"]:focus,
.widget input:focus {
    outline: none;
    border-color: var(--ob-act-text);
    box-shadow: 0 0 0 3px var(--ob-act-soft);
}

.comment-form input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--ob-act);
}

.form-submit {
    margin-bottom: 0;
}

/* 8. Search ----------------------------------------------------------------------------------------------- */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 18vh var(--ob-gap) 2rem;
    background: var(--ob-glass);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-close {
    position: absolute;
    top: 16px;
    right: var(--ob-gap);
    font-size: 0;
}

.search-close::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.search-container {
    width: 100%;
    max-width: 620px;
}

.search-form,
.search-container form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.search-form label {
    flex: 1;
    min-width: 0;
}

.search-container input[type="search"] {
    min-height: 56px;
    padding: 0 1.4rem;
    font-size: 1.125rem;
}

.search-container input[type="search"]::placeholder {
    color: var(--ob-text-3);
}

.search-submit {
    min-height: 56px;
    padding: 0 1.6rem;
}

/* 9. Related posts ---------------------------------------------------------------------------------------- */
.related-content-section {
    padding-top: 2.5rem;
    padding-bottom: 1rem;
    border-top: 1px solid var(--ob-edge);
    max-width: var(--ob-wrap);
}

.related-title {
    margin: 0 0 1.25rem;
    font-size: 1.25rem;
}

.related-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.related-grid {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 4px 2px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--ob-edge) transparent;
}

.carousel-nav {
    flex: none;
    font-size: 0;
    background: var(--ob-surface);
}

.carousel-nav::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.carousel-nav.next::before {
    transform: scaleX(-1);
}

.related-card {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    scroll-snap-align: start;
    border-radius: var(--ob-r-xl);
    background: var(--ob-surface);
    border: 1px solid transparent;
    color: inherit;
    transition: border-color 0.2s ease;
}

body.light-mode .related-card,
.related-card:hover {
    border-color: var(--ob-edge);
}

.related-thumbnail {
    height: 160px;
    flex: none;
    overflow: hidden;
    background: var(--ob-surface-2) center / cover no-repeat;
}

.related-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.related-card:hover .related-thumbnail img {
    transform: scale(1.04);
}

.related-card-content {
    padding: 1rem 1.15rem 1.15rem;
}

.related-card-title {
    margin: 0 0 0.4rem;
    color: var(--ob-text);
    font-size: 1.0625rem;
    line-height: 1.3;
}

.related-card-excerpt {
    color: var(--ob-text-3);
    font-size: 0.875rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 10. Lightbox, gallery, sidebar, footer ------------------------------------------------------------------ */
#obsidian-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(23, 22, 26, 0.94);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

#obsidian-lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-image {
    max-width: 100%;
    max-height: 88vh;
    border-radius: var(--ob-r);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

#obsidian-lightbox .lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    color: #F5F2EC;
    border-color: #3A373F;
    font-size: 1.5rem;
    font-weight: 400;
}

.gallery,
.wp-block-gallery {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1.5em;
    padding: 0;
    list-style: none;
}

.gallery-item,
.wp-block-gallery .blocks-gallery-item,
.wp-block-gallery .wp-block-image {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--ob-r);
}

.gallery-item img,
.wp-block-gallery img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.5s ease;
}

.gallery-item:hover img,
.wp-block-gallery .wp-block-image:hover img {
    transform: scale(1.04);
}

.gallery-icon a {
    display: block;
}

.gallery-columns-1, .wp-block-gallery.columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2, .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3, .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4, .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5, .wp-block-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6, .wp-block-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7, .wp-block-gallery.columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8, .wp-block-gallery.columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9, .wp-block-gallery.columns-9 { grid-template-columns: repeat(9, 1fr); }

.gallery:not([class*="gallery-columns-"]),
.wp-block-gallery:not([class*="columns-"]) {
    grid-template-columns: repeat(3, 1fr);
}

.gallery-caption,
.wp-block-gallery figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: var(--ob-scrim);
    color: var(--ob-text);
    font-size: 0.8125rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gallery-item:hover .gallery-caption,
.wp-block-gallery .wp-block-image:hover figcaption {
    opacity: 1;
}

.widget-area {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ob-edge);
}

@media (min-width: 1024px) {
    .single-post-container.has-sidebar .widget-area {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        position: sticky;
        top: calc(var(--ob-head) + 2rem);
        align-self: start;
    }
}

.widget {
    margin-bottom: 2rem;
    font-size: 0.9375rem;
}

.widget-title {
    margin: 0 0 0.75rem;
    color: var(--ob-text-3);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget li {
    padding: 0.35rem 0;
}

.site-footer {
    margin-top: 3rem;
    padding: 2rem 0 2.5rem;
    border-top: 1px solid var(--ob-edge);
    color: var(--ob-text-3);
    font-size: 0.875rem;
    text-align: center;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* 90s mode: a small, quiet switch under the copyright (7.2.0) */
.retro-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 0.9rem;
    border: 0;
    border-radius: var(--ob-pill);
    background: transparent;
    color: var(--ob-text-3);
    font-family: var(--ob-font);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

.retro-toggle:hover {
    background: var(--ob-surface-2);
    color: var(--ob-text);
}

.retro-toggle-off {
    display: none;
}

.site-info p {
    margin: 0;
}

/* WordPress's own page numbers (shown only if loading more posts is off) */
.pagination-fallback .nav-links {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ob-tap);
    height: var(--ob-tap);
    padding: 0 0.75rem;
    border-radius: var(--ob-pill);
    border: 1px solid var(--ob-edge);
    color: var(--ob-text);
}

.page-numbers.current {
    background: var(--ob-act);
    border-color: var(--ob-act);
    color: var(--ob-on-act);
}

/* WordPress alignment classes */
.alignleft {
    float: left;
    margin: 0.3em 1.5em 1em 0;
}

.alignright {
    float: right;
    margin: 0.3em 0 1em 1.5em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 11. Phones ---------------------------------------------------------------------------------------------- */
@media (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

@media (max-width: 768px) {
    :root {
        --ob-head: 64px;
    }

    .header-inner {
        gap: 0.5rem;
        padding: 0 1rem;
    }

    .site-title {
        font-size: 1.0625rem;
        letter-spacing: 0.1em;
    }

    .ob-logo {
        max-height: 38px;
    }

    .menu-toggle .menu-text,
    .menu-close .menu-text {
        display: none;
    }

    .menu-toggle,
    .menu-close {
        padding: 0;
        width: var(--ob-tap);
    }

    .overlay-navigation a {
        font-size: 1.3125rem;
        min-height: 52px;
    }

    .hero-header.glassmorphic-header {
        padding: 1rem 1rem 0;
    }

    .site-branding {
        height: calc(var(--ob-head) + 1.25rem);
        padding: 0 1rem;
        border-radius: 0 0 var(--ob-r) var(--ob-r);
    }

    .hero-card {
        aspect-ratio: 4 / 3;
    }

    .card-content {
        bottom: 1rem;
        max-width: calc(100% - 2rem);
        padding: 0.9rem 1.2rem 1rem;
    }

    .single-post-container {
        padding-top: 1.75rem;
    }

    .entry-content {
        font-size: 1rem;
    }

    .comment-body {
        padding: 1rem 1rem 1rem 4rem;
    }

    .comment-author .avatar {
        left: 1rem;
        top: 1rem;
        width: 36px;
        height: 36px;
    }

    .search-form,
    .search-container form {
        flex-wrap: wrap;
    }

    .search-form label {
        flex-basis: 100%;
    }

    .search-submit {
        width: 100%;
        min-height: 48px;
    }

    .carousel-nav {
        display: none;
    }

    .related-card {
        flex-basis: 76vw;
    }
}

@media (max-width: 900px) {
    .gallery[class*="gallery-columns-"],
    .wp-block-gallery[class*="columns-"] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .gallery,
    .wp-block-gallery,
    .gallery[class*="gallery-columns-"],
    .wp-block-gallery[class*="columns-"] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .gallery-caption,
    .wp-block-gallery figcaption {
        display: none;
    }
}

/* 12. Less motion ----------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero-bg-blurred {
        transform: none !important;
    }
}