/* =========================================================================
   DATAMOSH — Milot's Braindump
   Damaged signal as an aesthetic. Chroma lives in the display type and the
   chrome; running text stays calm, because posts here are long and technical.
   ========================================================================= */

/* ---------- 1. Faces (self-hosted; no third-party requests) -------------- */

@font-face {
    font-family: "Archivo Var";
    src: url("../fonts/archivo-var.woff2") format("woff2-variations");
    font-weight: 400 900;
    font-stretch: 62% 125%;
    font-display: swap;
}
@font-face {
    font-family: "Plex Sans";
    src: url("../fonts/plexsans-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Plex Sans";
    src: url("../fonts/plexsans-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Plex Mono";
    src: url("../fonts/plexmono-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Plex Mono";
    src: url("../fonts/plexmono-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

/* ---------- 2. Tokens --------------------------------------------------- */

:root {
    --void:    #07050E;
    --violet:  #170D2B;
    --panel:   #0E0A1B;
    --hot:     #FF2E88;
    --cyan:    #2BE7FF;
    --mint:    #86FFC2;
    --bone:    #EDE9F5;

    --dim:     rgba(237, 233, 245, .60);
    --dimmer:  rgba(237, 233, 245, .42);
    --hair:    rgba(237, 233, 245, .13);
    --hair-2:  rgba(237, 233, 245, .22);

    /* gh-font-* let the Ghost admin font picker override these. */
    --display: var(--gh-font-heading, "Archivo Var", "Archivo", "Helvetica Neue", Arial, sans-serif);
    --body:    var(--gh-font-body, "Plex Sans", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    --mono:    "Plex Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --measure: 720px;
    --gutter:  28px;
    --split:   2.5px;
}

/* ---------- 3. Base ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--void);
    color: var(--bone);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

a { color: var(--bone); text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--mint);
    color: var(--void);
    padding: 10px 16px;
    font-family: var(--mono);
    font-size: 13px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- 4. Atmosphere ----------------------------------------------- */

.field,
.halftone {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.field {
    background:
        radial-gradient(120% 66% at 10% -12%, rgba(255, 46, 136, .19), transparent 60%),
        radial-gradient(100% 58% at 94% -4%,  rgba(43, 231, 255, .13), transparent 62%),
        radial-gradient(90%  64% at 50% 106%, rgba(134, 255, 194, .07), transparent 60%);
}

.halftone {
    opacity: .45;
    background-image: radial-gradient(rgba(237, 233, 245, .15) .9px, transparent .9px);
    background-size: 4px 4px;
    mix-blend-mode: overlay;
}

.shell { position: relative; z-index: 2; }

/* ---------- 5. Layout --------------------------------------------------- */

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.wrap-prose { max-width: calc(var(--measure) + var(--gutter) * 2); }

.rule {
    height: 1px;
    background: linear-gradient(90deg, var(--hot), var(--cyan), transparent);
    margin: 0 0 30px;
}

.sechead {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--dimmer);
    margin: 0 0 22px;
}

.kicker {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--mint);
    margin: 0 0 20px;
}

/* ---------- 6. The signature: channel split ----------------------------- */

.glitch {
    text-shadow:
        calc(var(--split) * -1) 0 rgba(255, 46, 136, .92),
        var(--split) 0 rgba(43, 231, 255, .92);
}

/* A rare jolt, not a constant seizure. */
@keyframes signal {
    0%, 92%, 100% {
        text-shadow:
            calc(var(--split) * -1) 0 rgba(255, 46, 136, .92),
            var(--split) 0 rgba(43, 231, 255, .92);
    }
    94% {
        text-shadow:
            -7px 1px rgba(255, 46, 136, .92),
            6px -1px rgba(43, 231, 255, .92);
    }
    96% {
        text-shadow:
            2px 0 rgba(255, 46, 136, .92),
            -3px 0 rgba(43, 231, 255, .92);
    }
}

.hero-title.glitch,
.post-title.glitch { animation: signal 9s steps(1) infinite; }

/* ---------- 7. Site head ------------------------------------------------ */

.site-head {
    border-bottom: 1px solid var(--hair);
    position: relative;
}

.site-head-in {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.brand {
    --split: 1.5px;
    font-family: var(--display);
    font-weight: 800;
    font-stretch: 78%;
    text-transform: uppercase;
    font-size: 21px;
    letter-spacing: .015em;
    line-height: 1;
}

.nav { margin-left: auto; }

.nav ul,
.mobile-nav ul {
    display: flex;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav li a,
.mobile-nav li a {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dim);
    padding: 4px 0;
    border-bottom: 1px solid transparent;
}

.nav li a:hover,
.mobile-nav li a:hover {
    color: var(--bone);
    border-bottom-color: var(--hot);
}

.nav-toggle {
    display: none;
    margin-left: auto;
    background: none;
    border: 1px solid var(--hair-2);
    color: var(--bone);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 8px 13px;
    cursor: pointer;
}

.mobile-nav {
    border-top: 1px solid var(--hair);
    padding: 6px var(--gutter) 18px;
}

.mobile-nav ul { flex-direction: column; gap: 0; }

.mobile-nav li a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--hair);
}

/* ---------- 8. Hero ----------------------------------------------------- */

.hero { padding: 60px 0 46px; }

.hero-title {
    font-family: var(--display);
    font-weight: 800;
    font-stretch: 76%;
    text-transform: uppercase;
    font-size: clamp(38px, 6.6vw, 80px);
    line-height: .95;
    letter-spacing: -.004em;
    margin: 0 0 22px;
    max-width: 19ch;
    text-wrap: balance;
}

.hero-title a { color: inherit; }
.hero-title a:hover { color: var(--bone); }

.hero-dek {
    color: var(--dim);
    max-width: 58ch;
    font-size: 17px;
    margin: 0 0 20px;
}

.hero-meta,
.post-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dimmer);
    margin-bottom: 20px;
}

.tags { display: flex; gap: 8px; flex-wrap: wrap; }

.tag {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 11px;
    border: 1px solid rgba(255, 46, 136, .5);
    color: var(--hot);
}
.tag:hover { background: rgba(255, 46, 136, .12); }

.tag-cy {
    border-color: rgba(43, 231, 255, .45);
    color: var(--cyan);
}
.tag-cy:hover { background: rgba(43, 231, 255, .1); }

/* ---------- 9. Index list ----------------------------------------------- */

.post-list { display: block; padding-bottom: 20px; }

.card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 26px;
    padding: 22px 0;
    border-top: 1px solid var(--hair);
    align-items: start;
}

.card-date {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--dimmer);
    letter-spacing: .08em;
    padding-top: 6px;
    font-variant-numeric: tabular-nums;
}

.card-title {
    font-family: var(--display);
    font-weight: 700;
    font-stretch: 80%;
    text-transform: uppercase;
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: .004em;
    margin: 0 0 8px;
    text-wrap: balance;
}

.card-title a { transition: text-shadow .12s steps(2); }

.card-title a:hover {
    text-shadow:
        -2px 0 rgba(255, 46, 136, .92),
        2px 0 rgba(43, 231, 255, .92);
}

.card-excerpt {
    color: var(--dim);
    font-size: 14.5px;
    margin: 0 0 10px;
    max-width: 68ch;
}

.card-meta {
    display: flex;
    gap: 16px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dimmer);
}

.card-tag { color: var(--mint); }

/* ---------- 10. Post ---------------------------------------------------- */

.post-head { padding: 52px 0 30px; }

.post-title {
    font-family: var(--display);
    font-weight: 800;
    font-stretch: 78%;
    text-transform: uppercase;
    font-size: clamp(32px, 5.2vw, 58px);
    line-height: .98;
    letter-spacing: -.002em;
    margin: 0 0 22px;
    text-wrap: balance;
}

.post-dek {
    color: var(--dim);
    font-size: 18px;
    margin: 0 0 22px;
    max-width: 56ch;
}

/* When a page hides its title, prose becomes the first block and needs its
   own top spacing — the post header would normally have provided it. */
.post.page > .wrap-prose:first-child .prose { padding-top: 48px; }

.feature-image { margin: 0 0 44px; }

.feature-image img {
    width: 100%;
    border: 1px solid var(--hair);
}

.feature-image figcaption,
.prose figcaption {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--dimmer);
    margin-top: 10px;
    text-align: center;
}

/* ---------- 11. Prose (deliberately calm) ------------------------------- */

.prose {
    font-size: 17.5px;
    line-height: 1.75;
    color: rgba(237, 233, 245, .88);
    padding-bottom: 56px;
}

.prose > * { margin: 0 0 1.35em; }
.prose > *:last-child { margin-bottom: 0; }

.prose h2,
.prose h3,
.prose h4 {
    font-family: var(--display);
    font-weight: 700;
    font-stretch: 84%;
    text-transform: uppercase;
    color: var(--bone);
    line-height: 1.15;
    letter-spacing: .006em;
    margin: 2em 0 .7em;
    text-wrap: balance;
}

.prose h2 { font-size: 27px; }
.prose h3 { font-size: 21px; }
.prose h4 { font-size: 18px; }

.prose a {
    color: var(--cyan);
    border-bottom: 1px solid rgba(43, 231, 255, .4);
}
.prose a:hover { border-bottom-color: var(--cyan); }

.prose strong { color: var(--bone); font-weight: 600; }

.prose ul,
.prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--hot); }

.prose blockquote {
    border-left: 2px solid var(--hot);
    padding-left: 22px;
    margin-left: 0;
    color: var(--dim);
    font-style: normal;
}

.prose hr {
    border: 0;
    height: 1px;
    background: var(--hair);
    margin: 2.4em 0;
}

.prose img { border: 1px solid var(--hair); }

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}
.prose table th,
.prose table td {
    text-align: left;
    padding: 10px 14px 10px 0;
    border-bottom: 1px solid var(--hair);
}
.prose table th {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dimmer);
    font-weight: 400;
}

/* wide content scrolls inside itself, never the page */
.prose .table-wrap,
.prose figure.kg-embed-card { overflow-x: auto; }

/* ---------- 12. Code ---------------------------------------------------- */

.prose :not(pre) > code {
    font-family: var(--mono);
    font-size: .86em;
    background: var(--violet);
    border: 1px solid var(--hair);
    padding: .12em .4em;
    color: var(--mint);
    word-break: break-word;
}

.prose pre {
    background: var(--panel);
    border: 1px solid var(--hair-2);
    border-left: 2px solid var(--hot);
    padding: 18px 20px;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.62;
    color: var(--bone);
    -webkit-overflow-scrolling: touch;
}

.prose pre code {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Prism runs from Code Injection. Force it onto our ground and palette
   so a light Prism theme can't punch a white hole in the page. */
.prose pre[class*="language-"],
.prose code[class*="language-"] {
    background: var(--panel) !important;
    color: var(--bone) !important;
    text-shadow: none !important;
}

.prose .token.comment,
.prose .token.prolog,
.prose .token.doctype,
.prose .token.cdata { color: rgba(237, 233, 245, .42) !important; }

.prose .token.punctuation { color: rgba(237, 233, 245, .65) !important; }

.prose .token.property,
.prose .token.tag,
.prose .token.constant,
.prose .token.symbol,
.prose .token.deleted { color: var(--hot) !important; }

.prose .token.boolean,
.prose .token.number { color: var(--cyan) !important; }

.prose .token.selector,
.prose .token.attr-name,
.prose .token.string,
.prose .token.char,
.prose .token.builtin,
.prose .token.inserted { color: var(--mint) !important; }

.prose .token.operator,
.prose .token.entity,
.prose .token.url { color: var(--cyan) !important; }

.prose .token.atrule,
.prose .token.attr-value,
.prose .token.keyword { color: var(--hot) !important; }

.prose .token.function,
.prose .token.class-name { color: var(--cyan) !important; }

/* ---------- 13. Koenig cards -------------------------------------------- */

.kg-width-wide { max-width: 1000px; margin-left: 50%; transform: translateX(-50%); }
.kg-width-full { max-width: 100vw; margin-left: 50%; transform: translateX(-50%); }

.kg-callout-card {
    background: var(--violet);
    border: 1px solid var(--hair-2);
    padding: 18px 20px;
    display: flex;
    gap: 14px;
}

.kg-bookmark-card a.kg-bookmark-container {
    display: flex;
    border: 1px solid var(--hair-2);
    background: var(--panel);
    color: var(--bone);
}
.kg-bookmark-content { padding: 18px; }
.kg-bookmark-title { font-weight: 600; }
.kg-bookmark-description { color: var(--dim); font-size: 14.5px; }
.kg-bookmark-metadata { font-family: var(--mono); font-size: 11.5px; color: var(--dimmer); margin-top: 8px; }

.kg-button-card a {
    display: inline-block;
    background: var(--hot);
    color: var(--void);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 12px 20px;
}

.kg-toggle-card { border: 1px solid var(--hair-2); padding: 16px 18px; }

/* ---------- 13b. About page components ---------------------------------- */

/* Opening statement — one size up from body, still calm. */
.prose .lede {
    font-size: 21px;
    line-height: 1.5;
    color: var(--bone);
    max-width: 44ch;
}

/* Spec sheet: facts as data, because that is what they are. */
.prose .spec {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 0;
    margin: 0 0 1.35em;
    border-top: 1px solid var(--hair);
}

.prose .spec dt {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mint);
    padding: 13px 0;
    border-bottom: 1px solid var(--hair);
}

.prose .spec dd {
    margin: 0;
    padding: 13px 0;
    font-size: 15.5px;
    color: rgba(237, 233, 245, .88);
    border-bottom: 1px solid var(--hair);
}

/* Playlist: framed like a piece of equipment, not a naked embed. */
.prose .now-playing {
    border: 1px solid var(--hair-2);
    background: var(--panel);
    padding: 16px;
    margin: 0 0 1.35em;
}

.prose .now-playing-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dimmer);
    margin: 0 0 14px;
}

.prose .now-playing-head b {
    color: var(--mint);
    font-weight: 400;
}

.prose iframe[src*="spotify"] {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0;
}

/* Disclaimer: the most consequential text here, so it gets a frame. */
.prose .disclaimer {
    border: 1px solid rgba(255, 46, 136, .38);
    border-left: 3px solid var(--hot);
    background: rgba(255, 46, 136, .045);
    padding: 22px 24px;
    margin: 0 0 1.35em;
}

.prose .disclaimer-label {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hot);
    margin: 0 0 14px;
}

.prose .disclaimer p {
    font-size: 15.5px;
    color: rgba(237, 233, 245, .82);
}

.prose .disclaimer p:last-child { margin-bottom: 0; }

@media (max-width: 780px) {
    .prose .spec { grid-template-columns: 1fr; }
    .prose .spec dt { padding-bottom: 0; border-bottom: 0; }
    .prose .spec dd { padding-top: 6px; }
    .prose .lede { font-size: 19px; }
}

/* ---------- 14. Archives & error ---------------------------------------- */

.archive-head { padding: 56px 0 34px; }

.archive-title {
    font-family: var(--display);
    font-weight: 800;
    font-stretch: 76%;
    text-transform: uppercase;
    font-size: clamp(34px, 5.4vw, 62px);
    line-height: .98;
    margin: 0 0 16px;
}

.archive-desc { color: var(--dim); max-width: 56ch; margin: 0 0 12px; }

.archive-count {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dimmer);
    margin: 0;
}

.error { padding: 90px 0 110px; }

.error-code {
    font-family: var(--display);
    font-weight: 900;
    font-stretch: 70%;
    font-size: clamp(80px, 20vw, 220px);
    line-height: .84;
    margin: 0 0 20px;
}

.error-msg {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mint);
    margin: 0 0 16px;
}

.error-help { color: var(--dim); max-width: 52ch; }
.error-help a { color: var(--cyan); border-bottom: 1px solid rgba(43, 231, 255, .4); }

.error-details {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--dimmer);
    margin-top: 24px;
}

/* ---------- 15. Related & pagination ------------------------------------ */

.post-more { padding: 30px 0 10px; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 26px var(--gutter) 70px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dimmer);
    border-top: 1px solid var(--hair);
}

.pagination a { color: var(--bone); }
.pagination a:hover { color: var(--hot); }

/* ---------- 16. Foot ---------------------------------------------------- */

.site-foot {
    border-top: 1px solid var(--hair);
    padding: 44px 0 60px;
    margin-top: 40px;
}

.foot-brand {
    font-family: var(--display);
    font-weight: 800;
    font-stretch: 78%;
    text-transform: uppercase;
    font-size: 19px;
    margin: 0 0 8px;
    letter-spacing: .015em;
}

.foot-desc { color: var(--dim); margin: 0 0 18px; font-size: 15px; }

.foot-meta {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dimmer);
    margin: 0;
}

.foot-meta a:hover { color: var(--cyan); }

/* ---------- 17. Responsive ---------------------------------------------- */

@media (max-width: 780px) {
    :root { --gutter: 20px; --split: 2px; }

    .nav { display: none; }
    .nav-toggle { display: block; }

    .card {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .card-date { padding-top: 0; }
    .card-title { font-size: 20px; }

    .hero { padding: 44px 0 36px; }
    .post-head { padding: 38px 0 24px; }
    .prose { font-size: 17px; }

    .kg-width-wide,
    .kg-width-full {
        max-width: 100%;
        margin-left: 0;
        transform: none;
    }
}

@media (min-width: 781px) {
    .mobile-nav { display: none; }
}

/* ---------- 18. Motion opt-out ------------------------------------------ */

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