:root {
    --ph-bg: #0b0d0d;
    --ph-panel: #101313;
    --ph-ink: #e8eadf;
    --ph-muted: #858b82;
    --ph-line: #303633;
    --ph-accent: #b8ff75;
    --ph-accent-soft: rgba(184, 255, 117, 0.12);
    --ph-max: 1180px;
    --ph-copy: 680px;
    --ph-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --ph-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ph-bg); color-scheme: dark; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--ph-bg);
    color: var(--ph-ink);
    font-family: var(--ph-sans);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { max-width: 100%; }

::selection { background: var(--ph-accent); color: var(--ph-bg); }

.ph-atmosphere {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.55;
    background-image:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
        radial-gradient(circle at 18% 8%, rgba(184,255,117,0.055), transparent 27rem);
    background-size: 44px 44px, 44px 44px, auto;
}

.ph-site-header {
    width: min(var(--ph-max), calc(100% - 40px));
    height: 78px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--ph-line);
    font-family: var(--ph-mono);
    letter-spacing: 0.12em;
    font-size: 0.75rem;
}

.ph-wordmark { font-weight: 800; }
.ph-wordmark img { display: block; max-height: 34px; max-width: 220px; }
.ph-archive-link { color: var(--ph-muted); transition: color 160ms ease; }
.ph-archive-link:hover { color: var(--ph-accent); }

.ph-site-footer {
    width: min(var(--ph-max), calc(100% - 40px));
    margin: 76px auto 0;
    padding: 24px 0 34px;
    border-top: 1px solid var(--ph-line);
    color: var(--ph-muted);
    font: 0.68rem/1.4 var(--ph-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ph-footer-dot { margin: 0 0.6rem; }
.ph-site-footer a:hover { color: var(--ph-ink); }

/* HOME */
.ph-home {
    width: min(var(--ph-max), calc(100% - 40px));
    margin: 0 auto;
}
.ph-home-hero {
    min-height: 57vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 78px 0 64px;
    border-bottom: 1px solid var(--ph-line);
}
.ph-kicker, .ph-catalog-label {
    margin: 0 0 14px;
    color: var(--ph-accent);
    font: 0.72rem/1.2 var(--ph-mono);
    letter-spacing: 0.17em;
    text-transform: uppercase;
}
.ph-home h1 {
    margin: 0;
    max-width: 10ch;
    font: 800 clamp(3.5rem, 10vw, 8.8rem)/0.86 var(--ph-sans);
    letter-spacing: -0.07em;
    text-transform: uppercase;
}
.ph-intro {
    max-width: 610px;
    margin: 34px 0 0;
    color: #bcc1b8;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
}
.ph-home-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 34px;
}
.ph-enter-button, .ph-random-home {
    min-height: 44px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ph-line);
    background: var(--ph-panel);
    color: var(--ph-ink);
    font: 0.72rem/1 var(--ph-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}
.ph-enter-button:hover, .ph-random-home:hover { border-color: var(--ph-accent); color: var(--ph-accent); }

.ph-archive { padding: 58px 0 20px; }
.ph-archive-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 22px;
    font-family: var(--ph-mono);
}
.ph-archive-heading h2 { margin: 0; font-size: 0.82rem; letter-spacing: 0.15em; }
.ph-archive-heading span { color: var(--ph-muted); font-size: 0.68rem; letter-spacing: 0.1em; }
.ph-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--ph-line);
    border: 1px solid var(--ph-line);
}
.ph-card { min-width: 0; background: var(--ph-bg); transition: background 150ms ease; }
.ph-card:hover { background: var(--ph-panel); }
.ph-card-image-wrap {
    aspect-ratio: 2.5 / 3.5;
    overflow: hidden;
    background: #070808;
}
.ph-card-image {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: saturate(0.9);
    transition: transform 250ms ease, filter 250ms ease;
}
.ph-card:hover .ph-card-image { transform: scale(1.018); filter: saturate(1.05); }
.ph-card-placeholder { height: 100%; display: grid; place-items: center; color: var(--ph-line); font-size: 4rem; }
.ph-card-meta {
    padding: 12px;
    display: grid;
    gap: 3px;
    font: 0.66rem/1.35 var(--ph-mono);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.ph-card-meta span:first-child { color: var(--ph-accent); }
.ph-card-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* READER */
.ph-reader {
    width: min(900px, calc(100% - 32px));
    margin: 0 auto;
    transition: opacity 170ms ease;
}
.ph-reader.is-loading { opacity: 0.38; pointer-events: none; }
.ph-entry { padding-top: 38px; }
.ph-entry-header { text-align: center; margin: 0 auto 20px; }
.ph-entry-title {
    margin: 0 auto;
    max-width: 18ch;
    font: 750 clamp(2rem, 5vw, 4.2rem)/0.98 var(--ph-sans);
    letter-spacing: -0.045em;
}
.ph-feature-wrap {
    width: fit-content;
    max-width: min(760px, 100%);
    margin: 0 auto 22px;
    border: 1px solid var(--ph-line);
    background: #070808;
    box-shadow: 0 28px 80px rgba(0,0,0,0.3);
}
.ph-feature-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--ph-fit-image-h, min(46vh, 500px));
    object-fit: contain;
}

.ph-entry-content {
    width: min(var(--ph-copy), 100%);
    margin: 0 auto;
    color: #c9cdc5;
    font-size: clamp(1rem, 2vw, 1.12rem);
}
.ph-entry-content > :first-child { margin-top: 0; }
.ph-entry-content > :last-child { margin-bottom: 0; }
.ph-entry-content p { margin: 0 0 1.2em; }
.ph-entry-content h2, .ph-entry-content h3 { color: var(--ph-ink); line-height: 1.15; margin: 2.2em 0 0.8em; }
.ph-entry-content a { color: var(--ph-accent); text-decoration: underline; text-underline-offset: 0.18em; }
.ph-entry-content blockquote {
    margin: 1.8em 0;
    padding-left: 1.2em;
    border-left: 1px solid var(--ph-accent);
    color: var(--ph-ink);
}
.ph-entry-content .kg-audio-card { display: none !important; }
.ph-entry-content figure:not(.kg-audio-card) { margin: 1.8em 0; }
.ph-entry-content img { height: auto; }

/* Optional post attribution section. In the Ghost editor, add a heading named
   Sources, Attribution, Image Sources, or Credits, then put normal text/links
   underneath it. JavaScript converts that tail section into this disclosure. */
.ph-source-details {
    margin: 1.35rem 0 0;
    padding-top: 0.65rem;
    border-top: 1px solid var(--ph-line);
    color: var(--ph-muted);
    font: 0.67rem/1.5 var(--ph-mono);
}
.ph-source-details summary {
    width: fit-content;
    cursor: pointer;
    color: #777d77;
    font: 0.62rem/1.35 var(--ph-mono);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    user-select: none;
}
.ph-source-details summary:hover { color: var(--ph-accent); }
.ph-source-details[open] summary { margin-bottom: 0.7rem; color: var(--ph-accent); }
.ph-source-body { color: #8f958e; }
.ph-source-body > :first-child { margin-top: 0; }
.ph-source-body > :last-child { margin-bottom: 0; }
.ph-source-body p { margin: 0 0 0.65em; }
.ph-source-body a { color: #a9afa7; text-decoration-color: #686e68; }
.ph-source-body a:hover { color: var(--ph-accent); }

.ph-player {
    width: min(var(--ph-copy), 100%);
    margin: 20px auto 12px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--ph-line);
    background: rgba(16, 19, 19, 0.86);
    backdrop-filter: blur(12px);
    font-family: var(--ph-mono);
}
.ph-player.has-no-audio { opacity: 0.45; }
.ph-play-button, .ph-volume-button {
    min-height: 38px;
    border: 1px solid var(--ph-line);
    background: transparent;
    cursor: pointer;
    font: 0.66rem/1 var(--ph-mono);
    letter-spacing: 0.09em;
}
.ph-play-button { min-width: 68px; }
.ph-volume-button { padding: 0 10px; color: var(--ph-muted); }
.ph-play-button:hover, .ph-volume-button:hover { border-color: var(--ph-accent); color: var(--ph-accent); }
.ph-player.is-playing .ph-play-button { color: var(--ph-accent); border-color: var(--ph-accent); box-shadow: 0 0 0 3px var(--ph-accent-soft); }
.ph-player-main { min-width: 0; }
.ph-player-topline { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; font-size: 0.64rem; line-height: 1.2; }
.ph-track-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-time { color: var(--ph-muted); white-space: nowrap; }
.ph-seek {
    width: 100%;
    height: 2px;
    display: block;
    margin: 0;
    accent-color: var(--ph-accent);
    cursor: pointer;
}

.ph-nav {
    width: min(440px, 100%);
    margin: 16px auto 0;
    display: grid;
    grid-template-columns: 48px 48px minmax(120px, 1fr) 48px 48px;
    border: 1px solid var(--ph-line);
    font-family: var(--ph-mono);
}
.ph-nav > * {
    min-height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-right: 1px solid var(--ph-line);
    background: var(--ph-bg);
    cursor: pointer;
    font: 0.72rem/1 var(--ph-mono);
    letter-spacing: 0.08em;
}
.ph-nav > *:last-child { border-right: 0; }
.ph-nav > a:hover, .ph-nav-random:hover { color: var(--ph-accent); background: var(--ph-accent-soft); }
.ph-nav .is-disabled { color: #3f4541; cursor: default; }
.ph-key-hint {
    margin: 8px auto 0;
    text-align: center;
    color: #626862;
    font: 0.61rem/1.4 var(--ph-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* One-screen reader tuning. The JS refines --ph-fit-image-h from the
   actual title/text/player height so normal entries fit in one viewport. */
.post-template .ph-site-footer {
    display: none;
}

@media (min-width: 641px) {
    .post-template .ph-entry-title {
        font-size: clamp(1.9rem, 4.2vh, 3.45rem);
    }
    .post-template .ph-entry-content {
        font-size: clamp(0.94rem, 1.45vw, 1.04rem);
        line-height: 1.52;
    }
    .post-template .ph-player {
        padding-top: 11px;
        padding-bottom: 11px;
    }
    .post-template .ph-nav > * {
        min-height: 42px;
    }
}

/* STANDARD PAGES */
.ph-standard-page, .ph-error-page {
    width: min(760px, calc(100% - 40px));
    margin: 0 auto;
    padding: 88px 0 30px;
}
.ph-standard-page h1, .ph-error-page h1 {
    margin: 0 0 40px;
    font-size: clamp(2.4rem, 8vw, 5.8rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
}
.ph-page-feature-wrap { margin: 0; }
.ph-page-image { display: block; width: 100%; margin-bottom: 42px; border: 1px solid var(--ph-line); }
.ph-page-content { color: #c9cdc5; font-size: 1.08rem; }
.ph-page-content a { color: var(--ph-accent); text-decoration: underline; }
.ph-error-page p { color: var(--ph-muted); }
.ph-error-page .ph-enter-button { margin-top: 20px; }

@media (max-width: 880px) {
    .ph-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .ph-site-header { width: calc(100% - 28px); height: 64px; }
    .ph-home { width: calc(100% - 28px); }
    .ph-home-hero { min-height: 48vh; padding: 56px 0 46px; }
    .ph-home h1 { font-size: clamp(3.3rem, 19vw, 6rem); }
    .ph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ph-card-meta { padding: 9px; font-size: 0.59rem; }
    .ph-reader { width: calc(100% - 24px); }
    .ph-entry { padding-top: 44px; }
    .ph-entry-header { margin-bottom: 24px; }
    .ph-feature-wrap {
        width: min(760px, 100%);
        margin-bottom: 34px;
    }
    .ph-feature-image {
        width: 100%;
        max-height: none;
    }
    .ph-player {
        grid-template-columns: auto 1fr;
        gap: 10px;
    }
    .ph-volume-button { display: none; }
    .ph-player-topline { gap: 8px; font-size: 0.58rem; }
    .ph-nav { grid-template-columns: 42px 42px minmax(104px, 1fr) 42px 42px; }
    .ph-nav > * { min-height: 44px; font-size: 0.67rem; }
    .ph-key-hint { display: none; }
    .ph-site-footer { width: calc(100% - 28px); margin-top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Compact Ghost bookmark cards when they are used as source citations. */
.ph-source-body .kg-bookmark-card {
    margin: 0.45rem 0;
}
.ph-source-body .kg-bookmark-container {
    min-height: 0;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #a9afa7;
}
.ph-source-body .kg-bookmark-content {
    padding: 0;
}
.ph-source-body .kg-bookmark-title {
    font: 0.67rem/1.45 var(--ph-mono);
    font-weight: 400;
    color: #a9afa7;
}
.ph-source-body .kg-bookmark-title::before {
    content: "↗ ";
    color: var(--ph-accent);
}
.ph-source-body .kg-bookmark-description,
.ph-source-body .kg-bookmark-metadata,
.ph-source-body .kg-bookmark-thumbnail {
    display: none !important;
}
.ph-source-body .kg-bookmark-container:hover .kg-bookmark-title {
    color: var(--ph-accent);
}

/* Version 1.3.0 — desktop gallery layout
   On post pages, use the otherwise-empty left side of a laptop screen for
   publication navigation, title, catalog number, prose, and credits. This
   leaves most of the viewport height available to the artwork while keeping
   the complete reader controls visible without scrolling on normal short
   entries. Mobile/tablet keep the original stacked layout. */
@media (min-width: 960px) {
    .post-template {
        padding-left: 118px;
    }

    .post-template .ph-site-header {
        position: fixed;
        z-index: 20;
        inset: 0 auto 0 0;
        width: 118px;
        height: 100vh;
        margin: 0;
        padding: 24px 18px 22px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        border-bottom: 0;
        border-right: 1px solid var(--ph-line);
        background: rgba(11, 13, 13, 0.9);
        backdrop-filter: blur(12px);
    }

    .post-template .ph-wordmark img {
        max-width: 82px;
        max-height: 42px;
    }

    .post-template .ph-reader {
        width: min(1040px, calc(100% - 44px));
    }

    .post-template .ph-entry {
        --ph-entry-side: 210px;
        --ph-entry-gap: 34px;
        display: grid;
        grid-template-columns: minmax(0, var(--ph-entry-side)) minmax(0, 760px);
        grid-template-rows: auto 1fr;
        column-gap: var(--ph-entry-gap);
        justify-content: center;
        align-items: start;
        padding-top: 18px;
    }

    .post-template .ph-entry-header {
        grid-column: 1;
        grid-row: 1;
        margin: 4px 0 0;
        text-align: left;
    }

    .post-template .ph-entry-title {
        max-width: none;
        margin: 0;
        font-size: clamp(1.9rem, 3.7vh, 3.15rem);
        line-height: 0.96;
    }

    .post-template .ph-catalog-label {
        margin-bottom: 12px;
    }

    .post-template .ph-feature-wrap {
        grid-column: 2;
        grid-row: 1 / span 2;
        max-width: 100%;
        margin: 0 auto;
    }

    .post-template .ph-feature-image {
        /* max-height only prevents an image from getting too large; it does not
           enlarge an image whose intrinsic/rendered size is smaller. Give the
           artwork an explicit viewport-driven height so portrait pieces expand
           into the vertical space created by the sidebar layout. */
        height: var(--ph-fit-image-h, min(72vh, 720px));
        width: auto;
        max-height: none;
        max-width: 100%;
        object-fit: contain;
    }

    .post-template .ph-entry-content {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        margin: 24px 0 0;
        font-size: clamp(0.9rem, 1.15vw, 1rem);
        line-height: 1.48;
    }

    .post-template .ph-entry-content p {
        margin-bottom: 1em;
    }

    .post-template .ph-source-details {
        margin-top: 1rem;
    }

    .post-template .ph-player {
        margin-top: 14px;
        margin-bottom: 9px;
    }

    .post-template .ph-nav {
        margin-top: 10px;
    }

    .post-template .ph-key-hint {
        margin-top: 6px;
    }
}