/* ==========================================================
   POST — long-form writing in the Ink & Acid system.
   A 680px reading column; figures break out to 1040px.
   Builds on styles.css tokens; nothing here redefines them.
   ========================================================== */

.post-header .page-title { max-width: 18ch; font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
.post-header .page-intro { max-width: 560px; }
.post-meta {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: var(--spacing-md);
    font-family: var(--font-mono); font-size: var(--text-note); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-text-muted);
}
.post-meta a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid currentColor; }

.post { padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xl); }
.post-body { max-width: 680px; margin: 0 auto; font-size: 1.08rem; line-height: 1.72; color: var(--color-text); }
.post-body > * + * { margin-top: 1.15em; }
.post-body h2 {
    font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.7rem); line-height: 1.08;
    letter-spacing: -0.015em; margin-top: 2.4em; scroll-margin-top: 110px;
}
.post-body h2 .num { display: block; font-family: var(--font-mono); font-size: var(--text-note); letter-spacing: 0.16em;
    color: var(--color-accent); margin-bottom: 0.9rem; }
.post-body h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1.12rem; margin-top: 2em; letter-spacing: -0.005em; }
.post-body p, .post-body li { color: var(--color-text); }
.post-body .lede { font-size: 1.28rem; line-height: 1.55; }
.post-body em { font-style: italic; }
.post-body strong { font-weight: 600; }
.post-body a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-body ul { padding-left: 1.2em; list-style: disc; } .post-body li + li { margin-top: 0.45em; }
.post-body li::marker { color: var(--color-accent); }

/* the reader's guide: plain words first, code for builders */
.reading-note {
    border-left: 1px solid var(--color-accent); padding: 0.2em 0 0.2em 1.1em; color: var(--color-text-muted); font-size: 0.98rem;
}

/* Mark's actual messages */
.prompt {
    margin: 1.4em 0; padding: 1.1rem 1.3rem 1.05rem; border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-bg-raised); position: relative;
}
.prompt::before {
    content: 'Mark'; display: block; font-family: var(--font-mono); font-size: var(--text-note); letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.45rem;
}
.prompt[data-time]::before { content: 'Mark · ' attr(data-time); }
.prompt p { font-family: var(--font-mono); font-size: 0.93rem; line-height: 1.6; margin: 0; }
.prompt + .prompt { margin-top: -0.6em; }

/* code for builders */
.post-body pre {
    margin: 1.5em 0; padding: 1.2rem 1.3rem; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-bg-raised); font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.6; color: var(--color-text);
}
.post-body pre .c { color: var(--color-text-muted); }
.post-body pre .k { color: var(--color-accent); }
.post-body code { font-family: var(--font-mono); font-size: 0.9em; }
.code-label { display: block; font-family: var(--font-mono); font-size: var(--text-note); letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--color-text-muted); margin-bottom: -0.8em; }

/* tables */
.post-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 1.5em 0; }
.post-table th, .post-table td { text-align: left; vertical-align: top; padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--color-border); }
.post-table th { font-family: var(--font-mono); font-size: var(--text-note); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.post-table td:first-child { color: var(--color-text); }
.table-wrap { overflow-x: auto; }

/* stat strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin: 1.8em 0; }
.stats div { padding: 1.1rem 0.9rem 1rem 0; }
.stats div + div { border-left: 1px solid var(--color-border); padding-left: 1rem; }
.stats b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.1rem, 4vw, 2.9rem); line-height: 1; color: var(--color-text); }
.stats span { display: block; margin-top: 0.4rem; font-family: var(--font-mono); font-size: var(--text-note); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.stats .zero b { color: var(--color-accent); }

/* figures break out of the column */
.post-figure { margin: 2.2em auto; width: min(1040px, calc(100vw - 2 * var(--spacing-md))); position: relative; left: 50%; transform: translateX(-50%); }
.post-figure img, .post-figure video { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--color-border); background: #000; }
.post-figure figcaption { max-width: 680px; margin: 0.8rem auto 0; font-family: var(--font-mono); font-size: var(--text-note); letter-spacing: 0.04em; line-height: 1.6; color: var(--color-text-muted); }
.post-figure.narrow { width: min(680px, 100%); left: auto; transform: none; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 10px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.tile { position: relative; }
.tile .tag { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(11, 11, 9, 0.72);
    color: #ECE9DF; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.tile .tag.acid { background: #C8F542; color: #0B0B09; }

/* lighting scenes: a slow crossfade between four stills */
.scenes-loop { position: relative; aspect-ratio: 16 / 9; }
.scenes-loop img { position: absolute; inset: 0; opacity: 0; animation: sceneFade 16s infinite; }
.scenes-loop img:nth-child(1) { animation-delay: 0s; } .scenes-loop img:nth-child(2) { animation-delay: 4s; }
.scenes-loop img:nth-child(3) { animation-delay: 8s; } .scenes-loop img:nth-child(4) { animation-delay: 12s; }
.scenes-loop .tile-tag { position: absolute; left: 12px; top: 12px; z-index: 2; }
.scenes-loop .tile-tag span { position: absolute; white-space: nowrap; opacity: 0; animation: sceneFade 16s infinite; padding: 3px 9px;
    border-radius: 999px; background: #C8F542; color: #0B0B09; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.scenes-loop .tile-tag span:nth-child(2) { animation-delay: 4s; } .scenes-loop .tile-tag span:nth-child(3) { animation-delay: 8s; } .scenes-loop .tile-tag span:nth-child(4) { animation-delay: 12s; }
@keyframes sceneFade { 0% { opacity: 0; } 6%, 25% { opacity: 1; } 31%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .scenes-loop img, .scenes-loop .tile-tag span { animation: none; }
    .scenes-loop img:first-child, .scenes-loop .tile-tag span:first-child { opacity: 1; }
}

/* the lightmap sum: five layers + equals */
.lightsum { display: grid; grid-template-columns: repeat(5, 1fr) auto 1.6fr; gap: 8px; align-items: center; }
.lightsum .op { font-family: var(--font-serif); font-size: 2rem; color: var(--color-accent); padding: 0 4px; }
.lightsum .tile .tag { font-size: 0.6rem; left: 6px; top: 6px; }

/* diagrams drawn in SVG, themed by tokens */
.diagram svg { display: block; width: 100%; height: auto; }
.diagram .box { fill: var(--color-bg-raised); stroke: var(--color-border-strong); stroke-width: 1; }
.diagram .box.acid { stroke: var(--color-accent); }
.diagram .t { fill: var(--color-text); font-family: var(--font-sans); font-size: 15px; font-weight: 500; }
.diagram .s { fill: var(--color-text-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; }
.diagram .n { fill: var(--color-accent); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; }
.diagram .arrow { stroke: var(--color-accent); stroke-width: 1.4; fill: none; }
.diagram .loop { stroke: var(--color-border-strong); stroke-width: 1; fill: none; stroke-dasharray: 4 4; }

.post-cta { margin-top: 2.6em; padding-top: 1.6em; border-top: 1px solid var(--color-border); }
.post-cta a.button {
    display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.4rem; border-radius: 999px; background: var(--color-accent-fill);
    color: var(--color-accent-ink); font-family: var(--font-mono); font-size: var(--text-nav); letter-spacing: 0.06em; text-decoration: none;
}
.post-cta a.button:hover { filter: brightness(1.05); }
.post-credits { margin-top: 1.6em; font-size: 0.86rem; color: var(--color-text-muted); }

@media (max-width: 760px) {
    .post-body { font-size: 1.02rem; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stats div:nth-child(3) { border-left: 0; padding-left: 0; }
    .stats div:nth-child(n+3) { border-top: 1px solid var(--color-border); }
    .grid-3 { grid-template-columns: 1fr; }
    .lightsum { grid-template-columns: repeat(3, 1fr); }
    .lightsum .op { display: none; }
    .lightsum .tile.all { grid-column: 1 / -1; }
    .diagram.wide { overflow-x: auto; } .diagram.wide svg { min-width: 720px; }
}