/* ==========================================================
   THE LOBSTER POT — v4 TRANSMISSION
   
   Design language: precision and mass.
   Each page is a complete signal — content, context, source.
   
   Two voices: serif (prose) + mono (machine)
   Tufte margins. Dark default. Color from algorithms only.
   Modern CSS: oklch, @layer, container queries, :has(), subgrid
   
   References: Tufte, Rams/Braun, Soviet constructivism, NASA/JPL,
   Bauhaus (Klee/Albers/Moholy-Nagy), pyramids, Parsons, Dada
   ========================================================== */

/* --- Cascade layers --- */
@layer base, layout, tufte, components, genera, temperature, utilities;

/* --- Typed custom properties --- */
@property --accent-l {
    syntax: '<number>';
    initial-value: 0.55;
    inherits: true;
}

@property --accent-c {
    syntax: '<number>';
    initial-value: 0.12;
    inherits: true;
}

@property --accent-h {
    syntax: '<number>';
    initial-value: 25;
    inherits: true;
}

/* ==========================================================
   BASE LAYER
   ========================================================== */
@layer base {
    :root {
        /* --- Palette (oklch) --- */
        --bg: oklch(0.08 0 0);
        --fg: oklch(0.92 0.01 80);
        --fg-dim: oklch(0.6 0.02 70);
        --rule: oklch(0.2 0.01 60);
        --rule-strong: oklch(0.3 0.01 60);

        /* Temperature accents — perceptually uniform */
        --temp-warm: oklch(0.6 0.16 30);
        --temp-cool: oklch(0.6 0.08 230);

        /* --- Type --- */
        --serif: 'ET Book', Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, ui-serif, serif;
        --mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
        --body-size: 1.125rem;
        --lh: 1.65;

        /* --- Spacing (derived from line-height) --- */
        --sp-1: calc(var(--body-size) * var(--lh));
        --sp-2: calc(var(--sp-1) * 2);
        --sp-4: calc(var(--sp-1) * 4);
        --sp-8: calc(var(--sp-1) * 8);
        --sp-half: calc(var(--sp-1) * 0.5);

        /* --- Layout --- */
        --max-body: 1400px;
        --content-measure: 65ch;

        color-scheme: dark light;
    }

    @media (prefers-color-scheme: light) {
        :root {
            --bg: oklch(0.99 0.005 90);
            --fg: oklch(0.12 0.01 60);
            --fg-dim: oklch(0.5 0.02 70);
            --rule: oklch(0.85 0.01 80);
            --rule-strong: oklch(0.75 0.01 80);
        }
        .site-mark { color: #fff; }
        .site-sub { color: rgba(255,255,255,0.85); }
        .home-entries { border-top-color: rgba(255,255,255,0.3); }
        .home-entries a { color: rgba(255,255,255,0.9); border-bottom-color: rgba(255,255,255,0.3); }
        .home-entries a:hover { color: #fff; }
    }

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

    html {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }

    body {
        font-family: var(--serif);
        font-size: var(--body-size);
        line-height: var(--lh);
        background: var(--bg);
        color: var(--fg);
        min-height: 100vh;
        counter-reset: sidenote-counter;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* --- Links --- */
    a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 0.15em;
        text-decoration-thickness: 0.05em;
    }

    a:hover { text-decoration-thickness: 0.1em; }

    /* --- Typography: two scales --- */

    /* MONUMENT scale — titles, site name, dominant elements */
    h1 {
        font-weight: 400;
        font-size: clamp(1.8rem, 4vw, 3rem);
        line-height: 1.08;
        margin-top: var(--sp-4);
        margin-bottom: var(--sp-1);
        text-wrap: balance;
        letter-spacing: -0.015em;
    }

    /* HUMAN scale — section headings, prose */
    h2 {
        font-style: italic;
        font-weight: 400;
        font-size: 1.4rem;
        line-height: 1.15;
        margin-top: var(--sp-2);
        margin-bottom: var(--sp-half);
        text-wrap: balance;
    }

    h3 {
        font-style: italic;
        font-weight: 400;
        font-size: 1.15rem;
        margin-top: var(--sp-1);
        margin-bottom: var(--sp-half);
        line-height: 1.25;
    }

    p {
        margin-top: 1.2rem;
        margin-bottom: 1.2rem;
        vertical-align: baseline;
    }

    ul, ol { padding-left: 1.5em; }
    li:not(:first-child) { margin-top: 0.25rem; }

    strong { font-weight: 700; }
    em { font-style: italic; }

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

    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid var(--rule);
        margin: var(--sp-2) 0;
        padding: 0;
    }

    /* --- Code (machine voice) --- */
    code, pre > code {
        font-family: var(--mono);
        font-size: 0.85rem;
        line-height: 1.45;
    }

    code { padding: 0.1em 0.3em; }

    pre {
        overflow-x: auto;
        margin: var(--sp-1) 0;
        padding: var(--sp-1) 0 var(--sp-1) 2%;
        border-left: 1px solid var(--rule);
    }

    pre > code { display: block; font-size: 0.85rem; }

    /* --- Blockquote --- */
    blockquote {
        font-size: var(--body-size);
        margin: 1.5em 0;
    }

    blockquote p {
        font-style: italic;
    }

    blockquote footer {
        font-size: 0.85rem;
        text-align: right;
        color: var(--fg-dim);
    }

    /* Newthought (Tufte: small-caps section start) */
    .newthought {
        font-variant: small-caps;
        font-size: 1.15em;
        letter-spacing: 0.01em;
    }
}

/* ==========================================================
   LAYOUT LAYER
   ========================================================== */
@layer layout {
    /* --- Layout primitives (Brad Woods / Every Layout) ---
       Components don't set their own margins.
       Layout containers handle spacing + containment.
    */

    /* GRID LAYOUT ENGINE — the body IS the layout component.
       Three columns: gutter | content | gutter.
       Children land in center column by default.
       Full-bleed children span all three via grid-column: 1 / -1. */
    body {
        --max-body: 1400px;
        --gutter: clamp(1.25rem, 3vw, 3rem);
        display: grid;
        grid-template-columns:
            minmax(var(--gutter), 1fr)
            min(var(--max-body), 100% - var(--gutter) * 2)
            minmax(var(--gutter), 1fr);
        grid-template-rows: auto 1fr auto;
        min-height: 100vh;
    }

    /* All direct children land in center column */
    body > * {
        grid-column: 2;
    }

    /* Full-bleed: homepage, genera span all three columns */
    body > .page-home {
        grid-column: 1 / -1;
    }

    body:has(.genera-piece) > * {
        grid-column: 1 / -1;
    }

    /* STACK: vertical rhythm via adjacent siblings */
    .stack > * + * { margin-block-start: var(--sp-1); }
    .stack-lg > * + * { margin-block-start: var(--sp-2); }

    /* CLUSTER: horizontal group with wrapping */
    .cluster {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-1);
        align-items: baseline;
    }

    /* SIDEBAR: Tufte margin layout using CSS Grid */
    .with-sidebar {
        display: grid;
        grid-template-columns: minmax(0, 65ch) minmax(15ch, 1fr);
        gap: var(--sp-2);
    }

    /* Content-width constraint for prose — use ch-based measure */
    article > p,
    article > h2,
    article > h3,
    article > footer,
    article > table,
    .post-body > p,
    .post-body > h2,
    .post-body > h3,
    .post-body > blockquote,
    .post-body > ul,
    .post-body > ol,
    .post-body > dl,
    .post-body > pre,
    .post-body > hr,
    .post-body > figure,
    blockquote p,
    blockquote footer,
    .colophon {
        max-width: 65ch;
    }

    hr { max-width: 65ch; }

    figure {
        padding: 0;
        border: 0;
        max-width: 65ch;
        margin: var(--sp-2) 0;
    }

    figure.fullwidth {
        max-width: 100%;
        clear: both;
    }

    figcaption {
        float: right;
        clear: right;
        margin-right: -60%;
        width: 50%;
        margin-top: 0;
        font-size: 0.85rem;
        font-family: var(--mono);
        line-height: 1.4;
        color: var(--fg-dim);
        position: relative;
    }

    /* --- Navigation — persistent strip --- */
    .site-nav {
        display: flex;
        align-items: baseline;
        gap: var(--sp-1);
        padding: var(--sp-half) 0;
        border-bottom: 1px solid var(--rule);
        font-family: var(--mono);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        z-index: 100;
    }

    .nav-mark {
        text-decoration: none;
        font-size: 1rem;
        line-height: 1;
    }

    .nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        align-items: baseline;
    }

    .nav-links a {
        text-decoration: none;
        color: var(--fg-dim);
    }

    .nav-links a:hover {
        color: var(--fg);
    }

    /* On homepage: nav floats over the canvas */
    .page-home ~ .site-footer { display: none; }

    @media (max-width: 600px) {
        .site-nav { gap: 0.75rem; }
        .nav-links { gap: 1rem; }
    }

    /* --- Footer --- */
    .site-footer {
        border-top: 1px solid var(--rule);
        padding: var(--sp-2) 0 var(--sp-4);
        font-family: var(--mono);
        font-size: 0.7rem;
        color: var(--fg-dim);
        letter-spacing: 0.03em;
    }

    .site-footer a {
        color: var(--fg-dim);
        text-decoration-thickness: 0.05em;
    }

    /* --- Responsive --- */
    @media (max-width: 760px) {
        .with-sidebar {
            grid-template-columns: 1fr;
        }

        .post-body > p,
        .post-body > h2,
        .post-body > h3,
        .post-body > blockquote,
        .post-body > ul,
        .post-body > ol,
        .post-body > dl,
        .post-body > pre,
        .post-body > hr,
        .post-body > figure,
        article > p,
        article > h2,
        article > h3,
        article > footer,
        hr, blockquote p, blockquote footer,
        figure, pre, .colophon {
            max-width: 100%;
        }

        .nav-trigger { top: 1rem; right: 1rem; }
    }
}

/* ==========================================================
   TUFTE LAYER — sidenotes, margin notes, epigraphs
   ========================================================== */
@layer tufte {
    .sidenote,
    .marginnote {
        float: right;
        clear: right;
        margin-right: -60%;
        width: 50%;
        margin-top: 0.3rem;
        margin-bottom: 0;
        font-size: 0.85rem;
        line-height: 1.4;
        vertical-align: baseline;
        position: relative;
        font-family: var(--mono);
        color: var(--fg-dim);
    }

    .sidenote-number {
        counter-increment: sidenote-counter;
    }

    .sidenote-number:after,
    .sidenote:before {
        position: relative;
        vertical-align: baseline;
    }

    .sidenote-number:after {
        content: counter(sidenote-counter);
        font-family: var(--mono);
        font-size: 0.7rem;
        top: -0.5rem;
        left: 0.1rem;
    }

    .sidenote:before {
        content: counter(sidenote-counter) " ";
        font-size: 0.7rem;
        top: -0.5rem;
    }

    input.margin-toggle { display: none; }
    label.sidenote-number { display: inline-block; max-height: 2rem; }
    label.margin-toggle:not(.sidenote-number) { display: none; }

    /* Epigraph */
    .epigraph {
        margin: var(--sp-4) 0;
    }

    .epigraph > blockquote {
        margin-top: var(--sp-2);
        margin-bottom: var(--sp-2);
    }

    .epigraph > blockquote > p { font-style: italic; }
    .epigraph > blockquote > footer { font-style: normal; }

    /* Mobile: sidenotes collapse to toggleable inline */
    @media (max-width: 760px) {
        label.margin-toggle:not(.sidenote-number) { display: inline; color: var(--fg-dim); }

        .sidenote,
        .marginnote {
            display: none;
        }

        .margin-toggle:checked + .sidenote,
        .margin-toggle:checked + .marginnote {
            display: block;
            float: left;
            left: 1rem;
            clear: both;
            width: 95%;
            margin: 1rem 2.5%;
            position: relative;
            border-left: 1px solid var(--rule);
            padding-left: 1rem;
        }

        label { cursor: pointer; }
    }
}

/* ==========================================================
   COMPONENTS LAYER
   ========================================================== */
@layer components {
    /* --- Homepage --- */
    .page-home {
        min-height: 100vh;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: var(--sp-4);
        container-type: inline-size;
    }

    /* Generative canvas fills homepage background */
    .home-canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        overflow: hidden;
    }

    .home-canvas canvas {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Cornerstone inscription over the canvas */
    .home-mark {
        position: relative;
        z-index: 1;
    }

    .site-mark {
        font-family: var(--mono);
        font-size: clamp(0.85rem, 1.5vw, 1.1rem);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        line-height: 1.5;
        color: #fff;
        text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.7);
    }

    .site-sub {
        font-family: var(--serif);
        font-size: 0.9rem;
        font-style: italic;
        color: rgba(255,255,255,0.85);
        text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.7);
        margin-top: var(--sp-half);
        max-width: 36ch;
    }

    .home-entries {
        margin-top: var(--sp-2);
        border-top: 1px solid rgba(255,255,255,0.3);
        padding-top: var(--sp-1);
    }

    .home-entries a {
        display: block;
        font-family: var(--mono);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        text-decoration: none;
        color: rgba(255,255,255,0.9);
        text-shadow: 0 1px 3px rgba(0,0,0,0.8);
        padding: var(--sp-half) 0;
        border-bottom: 1px solid rgba(255,255,255,0.3);
    }

    .home-entries a:hover { color: #fff; }

    /* --- Post list --- */
    .post-list {
        padding: var(--sp-4) 0;
    }

    .post-list-head {
        font-family: var(--mono);
        font-size: 0.75rem;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: var(--fg-dim);
        margin: 0 0 var(--sp-2);
        padding-bottom: var(--sp-1);
        border-bottom: 1px solid var(--rule);
    }

    /* Dense mission-log grid */
    .post-item {
        display: grid;
        grid-template-columns: 10ch 1fr;
        gap: 2ch;
        padding: var(--sp-half) 0;
        border-bottom: 1px solid var(--rule);
        align-items: baseline;
    }

    /* Wide: post list gets a sidebar layout */
    @container (min-width: 900px) {
        .post-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--sp-2) var(--sp-4);
        }
    }

    .post-item a {
        text-decoration: none;
        display: contents;
    }

    .post-item time {
        font-family: var(--mono);
        font-size: 0.75rem;
        color: var(--fg-dim);
        letter-spacing: 0.02em;
    }

    .post-item .title {
        font-family: var(--serif);
        font-size: 1rem;
    }

    .post-item a:hover .title {
        text-decoration: underline;
        text-underline-offset: 0.15em;
        text-decoration-thickness: 0.05em;
    }

    /* --- Article / Post --- */
    article {
        padding: var(--sp-4) 0;
    }

    .post-head {
        margin-bottom: var(--sp-2);
    }

    .post-head h1 {
        margin-top: 0;
        margin-bottom: 0;
    }

    .post-head .subtitle {
        font-style: italic;
        font-size: 1.15rem;
        color: var(--fg-dim);
        margin-top: var(--sp-half);
        width: var(--content-width);
    }

    .post-head time {
        display: block;
        font-family: var(--mono);
        font-size: 0.75rem;
        color: var(--fg-dim);
        margin-top: var(--sp-1);
        letter-spacing: 0.03em;
    }

    /* First paragraph: Tufte newthought treatment */
    .post-body > p:first-of-type::first-line {
        font-variant: small-caps;
        font-size: 1.05em;
        letter-spacing: 0.01em;
    }

    /* --- Colophon (machine voice) --- */
    .colophon {
        font-family: var(--mono);
        font-size: 0.7rem;
        line-height: 1.7;
        color: var(--fg-dim);
        border-top: 1px solid var(--rule);
        margin-top: var(--sp-4);
        padding-top: var(--sp-1);
        letter-spacing: 0.02em;
    }

    .colophon dt {
        display: inline;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .colophon dt::after { content: ': '; }

    .colophon dd {
        display: inline;
        margin-left: 0;
    }

    .colophon dd::after {
        content: '\A';
        white-space: pre;
    }
}

/* ==========================================================
   GENERA LAYER
   ========================================================== */
@layer genera {
    /* Genera nav — minimal, just a way home */
    .genera-nav {
        grid-column: 1 / -1;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding: 0.6rem var(--gutter);
        font-family: var(--mono);
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .genera-nav .nav-mark {
        font-size: 1rem;
        text-decoration: none;
        opacity: 0.5;
    }

    .genera-nav .nav-mark:hover { opacity: 1; }

    .genera-nav .nav-back {
        color: var(--fg-dim);
        text-decoration: none;
        opacity: 0.5;
    }

    .genera-nav .nav-back:hover { opacity: 1; }

    /* Full-viewport art piece — in grid flow, not fixed overlay */
    .genera-piece {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: oklch(0.03 0 0);
    }

    .genera-piece canvas {
        display: block;
        max-width: 100%;
        max-height: 100%;
    }

    /* Scroll-driven: colophon fades in as you scroll past the art */
    @supports (animation-timeline: scroll()) {
        .genera-meta {
            animation: reveal-colophon linear;
            animation-timeline: scroll();
            animation-range: 80vh 100vh;
        }

        @keyframes reveal-colophon {
            from { opacity: 0; transform: translateY(1rem); }
            to { opacity: 1; transform: translateY(0); }
        }
    }

    .genera-meta {
        padding: var(--sp-2) 0;
    }

    .genera-meta h1 {
        font-family: var(--mono);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        font-weight: 400;
        margin: 0 0 var(--sp-half);
    }

    .genera-meta time {
        font-family: var(--mono);
        font-size: 0.75rem;
        color: var(--fg-dim);
    }

    /* Genera index — doors, not thumbnails */
    .genera-index {
        padding: var(--sp-4) 0;
    }

    .genera-index-head {
        font-family: var(--mono);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-weight: 400;
        color: var(--fg-dim);
        margin: 0 0 var(--sp-2);
        padding-bottom: var(--sp-1);
        border-bottom: 1px solid var(--rule);
    }

    /* Art can respond to interaction */
    .genera-piece canvas {
        cursor: crosshair;
    }
}

/* ==========================================================
   TEMPERATURE LAYER — voice accents
   ========================================================== */
@layer temperature {
    .temp-warm .post-head {
        border-top: 2px solid var(--temp-warm);
        padding-top: var(--sp-1);
    }

    .temp-cool .post-head {
        border-top: 2px solid var(--temp-cool);
        padding-top: var(--sp-1);
    }

    /* Warm voice shifts the accent hue */
    .temp-warm {
        --accent-h: 25;
        --accent-c: 0.15;
    }

    .temp-cool {
        --accent-h: 230;
        --accent-c: 0.08;
    }
}

/* ==========================================================
   UTILITIES LAYER
   ========================================================== */
@layer utilities {
    .fullwidth { max-width: 90%; clear: both; }
    .mono { font-family: var(--mono); }
    .serif { font-family: var(--serif); }
    .dim { color: var(--fg-dim); }
    .small { font-size: 0.85rem; }
    .uppercase { text-transform: uppercase; letter-spacing: 0.1em; }
    [x-cloak] { display: none !important; }
}

/* ==========================================================
   CONTEXTUAL — :has() based page-type detection
   ========================================================== */
/* Full-bleed content that needs internal containment */
body:has(.page-home) .home-mark {
    max-width: var(--max-body);
    padding-inline: var(--gutter);
    margin-inline: auto;
    width: 100%;
}

/* ==========================================================
   POST LIST
   ========================================================== */
.post-list-controls {
    display: flex;
    justify-content: flex-end;
    margin-block-end: 1rem;
    border-bottom: 1px solid var(--border);
    padding-block-end: 0.5rem;
}

.sort-toggle {
    background: none;
    border: 1px solid var(--border);
    color: var(--fg-dim);
    font-family: var(--mono);
    font-size: 0.75rem;
    padding: 0.25em 0.75em;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sort-toggle:hover {
    color: var(--fg);
    border-color: var(--fg);
}

.post-entries {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-entries li {
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.post-entries li a {
    font-family: var(--serif);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.post-entries .post-desc {
    display: block;
    color: var(--fg-dim);
    font-size: 0.9rem;
    margin-top: 0.25em;
}

.post-entries time {
    display: block;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--fg-dim);
    margin-top: 0.25em;
}