/* ============================================================
   AI Video Field Guide
   1980s technical-manual / editorial-book system.
   ============================================================ */

:root {
    --bg: #f8f8f6;
    --surface: #ffffff;
    --paper: #fbfbf9;
    --ink: #111111;
    --ink-80: rgba(0, 0, 0, 0.82);
    --ink-65: rgba(0, 0, 0, 0.65);
    --ink-50: rgba(0, 0, 0, 0.50);
    --ink-35: rgba(0, 0, 0, 0.35);
    --ink-20: rgba(0, 0, 0, 0.20);
    --ink-12: rgba(0, 0, 0, 0.12);
    --ink-08: rgba(0, 0, 0, 0.08);
    --accent: #2563eb;
    --accent-deep: #1342ff;
    --accent-soft: rgba(37, 99, 235, 0.10);
    --success: #057a55;
    --warn: #9a6a00;
    --err: #b91c1c;
    --measure: 760px;
    --wide: 1180px;
    --radius: 6px;
    --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }

html {
    background: var(--bg);
    scroll-behavior: smooth;
    scroll-padding-top: 78px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink-80);
    font-family: var(--font-serif);
    font-size: 20px;
    line-height: 1.66;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

@media (max-width: 720px) {
    body { font-size: 18px; line-height: 1.62; }
}

::selection {
    background: var(--accent-soft);
    color: var(--ink);
}

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover { color: var(--accent-deep); }

p {
    margin: 0 0 1.05em 0;
    max-width: var(--measure);
}

p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
    margin: 0 0 0.42em 0;
    color: var(--ink);
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: 0;
}

h1, .masthead-h1 {
    max-width: 12.5ch;
    font-size: 76px;
}

h2 {
    max-width: 15ch;
    font-size: 48px;
}

h3 {
    margin-top: 2.1em;
    max-width: 24ch;
    font-size: 31px;
    line-height: 1.12;
}

h4 {
    margin-top: 1.8em;
    font-size: 22px;
    line-height: 1.18;
}

@media (max-width: 900px) {
    h1, .masthead-h1 { font-size: 58px; }
    h2 { font-size: 40px; }
}

@media (max-width: 560px) {
    h1, .masthead-h1 { font-size: 44px; }
    h2 { font-size: 34px; }
    h3 { font-size: 27px; }
}

ul, ol {
    max-width: var(--measure);
    margin: 0 0 1.2em 0;
    padding-left: 1.25em;
}

li { margin-bottom: 0.55em; }
li::marker { color: var(--accent); }

hr {
    width: 5ch;
    margin: 4.5rem 0;
    border: none;
    color: var(--ink-35);
    text-align: center;
}

hr::before { content: ". . ."; font-family: var(--font-mono); letter-spacing: 0.16em; }

blockquote {
    max-width: var(--measure);
    margin: 2rem 0;
    padding: 0 0 0 1.25rem;
    border-left: 2px solid var(--accent);
    color: var(--ink-65);
    font-style: italic;
}

code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.78em;
    font-variant-ligatures: none;
}

p code, li code, td code {
    padding: 0.1em 0.28em;
    border: 1px solid var(--ink-12);
    background: var(--surface);
    color: var(--ink);
}

pre {
    max-width: min(100%, var(--wide));
    margin: 1.5rem 0 2rem 0;
    padding: 1.1rem 1.25rem;
    overflow-x: auto;
    border: 1px solid var(--ink-20);
    border-radius: var(--radius);
    background: #111111;
    color: #f3f4f2;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.62;
    font-variant-ligatures: none;
}

pre code {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

dfn {
    border-bottom: 1px dotted var(--accent);
    font-style: normal;
}

/* ----- Layout ----- */

.container,
.essay {
    width: min(100% - 32px, var(--measure));
    margin-inline: auto;
}

.fluid {
    width: min(100% - 32px, var(--wide));
    margin-inline: auto;
}

.section {
    padding: 5.75rem 0;
    border: 0;
}

.section--tint { background: transparent; }

.section--dark {
    background: #111111;
    color: rgba(255, 255, 255, 0.78);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #ffffff; }

.lede {
    max-width: var(--measure);
    margin-bottom: 1.35em;
    color: var(--ink-80);
    font-size: 25px;
    line-height: 1.45;
}

@media (max-width: 560px) {
    .section { padding: 4.25rem 0; }
    .lede { font-size: 21px; }
}

.muted { color: var(--ink-50); }
.faint { color: var(--ink-35); }
.small { font-size: 0.82em; }
.mono {
    font-family: var(--font-mono);
    font-variant-ligatures: none;
}

.section-id,
.kicker,
.figlabel,
.masthead-kicker,
.status-h,
.field-note-tag,
.lib-group-kicker,
.lib-group-count,
.m-role,
.cat,
.lab,
.stack-id,
.method-step .num,
.toc-num,
.toc-arrow,
.ascii-stats,
.badge,
.copy-btn,
.chip,
.pre-copy,
.topbar a,
.topbar-brand,
.chapter-nav .kk,
.caption,
figcaption {
    font-family: var(--font-mono);
    font-variant-ligatures: none;
}

.section-id {
    display: flex;
    gap: 0.85rem;
    align-items: baseline;
    margin-bottom: 1.1rem;
    color: var(--ink-50);
    font-size: 11px;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.section-id .num {
    color: var(--accent);
    font-weight: 600;
}

.kicker,
.masthead-kicker {
    display: block;
    margin: 0 0 1rem 0;
    color: var(--ink-50);
    font-size: 11px;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* ----- Top nav ----- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--ink-12);
    background: rgba(248, 248, 246, 0.94);
    backdrop-filter: blur(8px);
}

.topbar-inner {
    width: min(100% - 32px, var(--wide));
    min-height: 64px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.01em;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
}

.topbar-brand .logo {
    width: 16px;
    height: 16px;
    border: 1px solid var(--accent);
    background: var(--accent);
}

.topbar nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem 1.45rem;
}

.topbar nav a {
    color: var(--ink-50);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: none;
}

.topbar nav a:hover { color: var(--ink); }
.topbar nav a[aria-current="page"] {
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
}

@media (max-width: 760px) {
    .topbar-inner { align-items: flex-start; flex-direction: column; padding: 0.9rem 0; }
    .topbar nav { justify-content: flex-start; }
}

.progress {
    position: fixed;
    top: 64px;
    left: 0;
    z-index: 39;
    height: 2px;
    width: 0%;
    background: var(--accent);
}

main { padding-top: 0; }

/* ----- Editorial hero and figures ----- */

.hero--manual {
    padding-top: 5.25rem;
}

.masthead-h1 {
    margin-bottom: 1.15rem;
}

.masthead-byline {
    margin-top: 1.5rem;
    color: var(--ink-50);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    line-height: 1.7;
    text-transform: uppercase;
}

.manual-figure {
    margin: 2.25rem 0 2.35rem 0;
}

.manual-figure--lead {
    margin-top: 0;
    margin-bottom: 2rem;
}

.manual-figure--portrait {
    max-width: 290px;
}

.manual-figure--inline {
    max-width: 360px;
}

.manual-figure--inline:nth-of-type(even) {
    margin-left: auto;
}

.manual-figure .clip,
.clip {
    margin: 1.5rem 0 0.5rem 0;
    overflow: hidden;
    border: 1px solid var(--ink-20);
    border-radius: var(--radius);
    background: #111111;
}

.manual-figure .clip { margin-top: 0; }

.clip video,
.clip .placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #111111;
    object-fit: cover;
}

.clip[data-aspect="9:16"] video,
.clip[data-aspect="9:16"] .placeholder {
    aspect-ratio: 9 / 16;
    max-height: 740px;
    margin-inline: auto;
}

.clip[data-aspect="1:1"] video,
.clip[data-aspect="1:1"] .placeholder {
    aspect-ratio: 1 / 1;
}

.clip[data-aspect="4:3"] video,
.clip[data-aspect="4:3"] .placeholder {
    aspect-ratio: 4 / 3;
}

.clip[data-aspect="21:9"] video,
.clip[data-aspect="21:9"] .placeholder {
    aspect-ratio: 21 / 9;
}

.clip[data-aspect="3:4"] video,
.clip[data-aspect="3:4"] .placeholder {
    aspect-ratio: 3 / 4;
}

.clip .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.clip .caption,
.manual-figure figcaption,
.catalog-caption,
.proof-card figcaption {
    display: block;
    padding: 0.75rem 0 0 0;
    border: 0;
    background: transparent;
    color: var(--ink-50);
    font-size: 11px;
    letter-spacing: 0.08em;
    line-height: 1.6;
    text-transform: uppercase;
}

.clip .caption {
    padding: 0.7rem 0.8rem;
    border-top: 1px solid var(--ink-20);
    background: var(--surface);
}

.fig-id {
    color: var(--accent);
    font-weight: 600;
}

.cat-line {
    color: var(--ink-65);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Consistency scoring table lives inside the chapter column; don't inherit the 720px global evidence-table minimum. */
.story-score-table {
    min-width: 0;
    table-layout: fixed;
}

/* Long file paths / inline literals should never escape cards. */
p code, li code, td code, dd code,
.story-card code,
.cat-line,
figcaption {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.story-card p,
.asset-placeholder,
.asset-frame {
    min-width: 0;
}

.cat-year {
    display: inline-block;
    margin-left: 0.8ch;
    color: var(--ink-35);
}

.figlabel {
    display: block;
    margin-bottom: 1.25rem;
    color: var(--ink-50);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ----- Index statistics and contents ----- */

.stats-section { padding-top: 0.5rem; padding-bottom: 2rem; }
.proof-section { padding-top: 1.25rem; padding-bottom: 1.5rem; }

.section-h3 {
    margin: 0.5rem 0 0.75rem 0;
    font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
    font-weight: 500;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.proof-grid {
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem 1.5rem;
    align-items: stretch;
    grid-auto-rows: 1fr;
}
.proof-grid .proof-cell { margin: 0; }
.proof-grid .clip {
    margin: 0 0 0.55rem 0;
    border: 1px solid var(--ink-20);
    border-radius: var(--radius);
    overflow: hidden;
    background: #111;
}
.proof-grid .clip[data-aspect="9:16"] video,
.proof-grid .clip[data-aspect="9:16"] .placeholder {
    aspect-ratio: 9 / 16;
    max-height: 380px;
    width: 100%;
    object-fit: cover;
}
.proof-grid figcaption {
    display: block;
    padding: 0;
    color: var(--ink-65);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-transform: none;
}
.proof-grid figcaption .fig-id {
    color: var(--accent);
    font-weight: 600;
    margin-right: 0.5ch;
}
@media (max-width: 880px) {
    .proof-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .proof-grid { grid-template-columns: 1fr 1fr; gap: 0.85rem 0.85rem; }
    .proof-grid .clip[data-aspect="9:16"] video,
    .proof-grid .clip[data-aspect="9:16"] .placeholder { max-height: 340px; }
}

.ledger-list {
    margin: 1.5rem 0 0 0;
    padding: 0;
    border-top: 1px solid var(--ink-20);
}
.ledger-row {
    display: grid;
    grid-template-columns: 18ch minmax(0, 1fr);
    column-gap: 2ch;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--ink-12, rgba(0,0,0,0.08));
    align-items: baseline;
}
.ledger-row dt {
    margin: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
}
.ledger-row dd {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.55;
}
@media (max-width: 640px) {
    .ledger-row { grid-template-columns: 1fr; row-gap: 0.25rem; }
}

.ascii-stats {
    max-width: var(--wide);
    margin: 1.25rem 0 0 0;
    padding: 1.15rem 0;
    border-top: 1px solid var(--ink-20);
    border-bottom: 1px solid var(--ink-20);
    color: var(--ink);
    font-size: 13px;
    line-height: 1.75;
    font-feature-settings: "liga" 0, "calt" 0;
}

.ascii-row {
    display: grid;
    grid-template-columns: 13ch 14ch 9ch minmax(0, 1fr);
    column-gap: 2ch;
    align-items: baseline;
    padding: 0.25rem 0;
}

.ascii-label {
    color: var(--accent);
    font-weight: 600;
}

.ascii-bar { color: var(--ink); }
.ascii-count { color: var(--ink-65); }
.ascii-desc { color: var(--ink-50); white-space: normal; }

@media (max-width: 760px) {
    .ascii-row {
        grid-template-columns: 1fr;
        row-gap: 0.1rem;
        padding: 0.55rem 0;
    }
}

.toc-list {
    display: block;
    margin-top: 1.5rem;
    border-top: 1px solid var(--ink-20);
}

.toc-row {
    display: grid;
    grid-template-columns: 5ch minmax(0, 1fr) 3ch;
    gap: 1rem;
    align-items: baseline;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--ink-20);
    color: var(--ink);
    text-decoration: none;
}

.toc-row:hover {
    color: var(--ink);
    text-decoration: none;
}

.toc-num,
.toc-arrow {
    color: var(--accent);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.toc-arrow {
    justify-self: end;
    transition: transform 140ms ease;
}

.toc-row:hover .toc-arrow { transform: translateX(3px); }

.toc-title {
    display: block;
    color: var(--ink);
    font-size: 25px;
    line-height: 1.15;
}

.toc-desc {
    display: block;
    margin-top: 0.25rem;
    color: var(--ink-50);
    font-size: 17px;
    line-height: 1.35;
}

/* ----- Tables and ledgers ----- */

.cmp-wrap,
.matrix-wrap {
    max-width: var(--wide);
    margin: 1.5rem 0 2rem 0;
    overflow-x: auto;
    border-top: 1px solid var(--ink-20);
    border-bottom: 1px solid var(--ink-20);
}

.cmp,
.field-note-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.45;
}

.cmp th,
.cmp td,
.field-note-table th,
.field-note-table td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--ink-12);
    text-align: left;
    vertical-align: top;
}

.cmp th,
.field-note-table th {
    color: var(--ink-50);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.cmp tbody tr:last-child td,
.field-note-table tbody tr:last-child td { border-bottom: 0; }

.cmp tr.featured,
.field-note-table tr.featured { background: var(--accent-soft); }

.cmp td.ok,
.field-note-table td.ok { color: var(--success); font-family: var(--font-mono); font-size: 12px; }

.cmp td.bad,
.field-note-table td.bad { color: var(--err); font-family: var(--font-mono); font-size: 12px; }

/* ----- Status page ----- */

.status-h {
    margin: 3rem 0 0.8rem 0;
    max-width: none;
    color: var(--accent);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.status-list {
    max-width: var(--measure);
    margin: 0 0 1.9rem 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink-20);
}

.status-list li {
    position: relative;
    margin: 0;
    padding: 0.9rem 0 0.9rem 1.7rem;
    border-bottom: 1px solid var(--ink-12);
    font-size: 17px;
    line-height: 1.55;
}

.status-list li::before {
    position: absolute;
    left: 0;
    top: 1.15rem;
    font-family: var(--font-mono);
    font-size: 11px;
}

.status-ok li::before { content: "OK"; color: var(--success); }
.status-bad li::before { content: "NO"; color: var(--err); }
.status-warn li::before { content: "??"; color: var(--warn); }

/* ----- Badges ----- */

.badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.45rem;
    padding: 0.16rem 0.42rem;
    border: 1px solid var(--ink-20);
    color: var(--ink-65);
    background: var(--surface);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-transform: uppercase;
    vertical-align: 0.18em;
}

.badge--tested { border-color: rgba(5, 122, 85, 0.35); color: var(--success); }
.badge--failed { border-color: rgba(185, 28, 28, 0.35); color: var(--err); }
.badge--untested { border-color: rgba(154, 106, 0, 0.35); color: var(--warn); }
.badge--pass { border-color: rgba(5, 122, 85, 0.35); color: var(--success); }
.badge--note { border-color: var(--ink-20); color: var(--ink-65); }

/* ----- Forms: schema explorer and builder ----- */

.schema,
.builder {
    max-width: var(--wide);
    margin: 2rem 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding: 1.25rem;
    border: 1px solid var(--ink-20);
    border-radius: var(--radius);
    background: var(--surface);
}

@media (min-width: 960px) {
    .schema { grid-template-columns: minmax(0, 1fr); }
    .builder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

@media (min-width: 1180px) {
    .schema { grid-template-columns: minmax(430px, 1.12fr) minmax(300px, 0.88fr); }
}

.schema > *,
.builder > * { min-width: 0; }

.schema-form {
    display: grid;
    gap: 0.7rem;
}

.schema-form label {
    display: grid;
    grid-template-columns: minmax(17ch, auto) minmax(0, 1fr);
    gap: 0.95rem;
    align-items: center;
    color: var(--ink-50);
    font-family: var(--font-mono);
    font-size: 12px;
}

.schema-form label .name {
    min-width: 0;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.schema-form label:has(textarea) {
    grid-template-columns: 1fr;
    gap: 0.4rem;
}

.schema-form textarea {
    grid-column: 1 / -1;
    min-height: 140px;
}

.builder fieldset {
    margin: 0 0 0.8rem 0;
    padding: 0;
    border: 0;
}

.builder legend {
    margin-bottom: 0.35rem;
    padding: 0;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.builder .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

@media (max-width: 560px) {
    .schema-form label { grid-template-columns: 1fr; gap: 0.25rem; }
    .builder .row { grid-template-columns: 1fr; }
}

input[type="text"],
input[type="number"],
select,
textarea {
    width: 100%;
    border: 1px solid var(--ink-20);
    border-radius: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    padding: 0.58rem 0.68rem;
}

textarea { resize: vertical; }

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

input[type="checkbox"] { accent-color: var(--accent); }

.schema-output,
.builder-output {
    min-height: 100%;
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    border: 1px solid #242424;
    border-radius: var(--radius);
    background: #111111;
    color: #f3f4f2;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

.schema-output .k { color: #93c5fd; }
.schema-output .s { color: #bbf7d0; }
.schema-output .n { color: #fde68a; }
.schema-output .b { color: #ddd6fe; }

.builder-output .json {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    color: #bbf7d0;
}

.copy-btn,
.pre-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--ink);
    color: var(--bg);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.copy-btn { padding: 0.55rem 0.8rem; }
.copy-btn:hover,
.pre-copy:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.copy-btn.copied,
.pre-copy.copied { background: var(--success); border-color: var(--success); color: #ffffff; }

.pre-wrap {
    position: relative;
    max-width: var(--wide);
    margin: 1.5rem 0 2rem 0;
}

.pre-wrap pre { margin: 0; }

.pre-wrap .pre-copy {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    min-height: 30px;
    padding: 0.35rem 0.55rem;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    opacity: 0;
}

.pre-wrap:hover .pre-copy { opacity: 1; }

/* ----- Explanatory grids and cards ----- */

.constraints,
.patterns,
.failures,
.model-grid,
.stacks,
.method-flow,
.realperson-grid,
.storyboard-grid {
    max-width: var(--wide);
    margin: 1.75rem 0 2rem 0;
    display: grid;
    gap: 1rem;
    align-items: stretch;
    grid-auto-rows: 1fr;
}

.constraints,
.patterns,
.failures,
.model-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.stacks,
.method-flow,
.storyboard-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.realperson-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.constraint,
.pattern,
.failure,
.model-card,
.stack,
.method-step,
.rp-card,
.refset {
    border: 1px solid var(--ink-20);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1rem;
}

.constraint {
    border-left: 2px solid var(--accent);
}

.constraint .head,
.pattern .num,
.failure .lab,
.model-card .m-role,
.stack .stack-id,
.method-step .num,
.rp-card .cat {
    margin-bottom: 0.55rem;
    color: var(--accent);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.failure .lab { color: var(--err); }

.constraint .body,
.pattern p,
.failure .fix,
.model-card p,
.stack p,
.method-step p,
.rp-card .teaches,
.refset li {
    color: var(--ink-65);
    font-size: 16px;
    line-height: 1.52;
}

.pattern h4,
.failure h4,
.model-card h4,
.stack h4,
.method-step h4,
.rp-card h4,
.refset h4 {
    margin: 0 0 0.45rem 0;
    max-width: none;
    font-size: 21px;
    line-height: 1.15;
}

.failure .fix {
    margin-top: 0.8rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ink-12);
}

.failure .fix b {
    margin-right: 0.5rem;
    color: var(--success);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.model-card h4 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* ----- Anatomy ----- */

.anatomy-prompt {
    max-width: var(--measure);
    margin: 1.6rem 0 1.8rem 0;
    padding: 1.25rem;
    border: 1px solid var(--ink-20);
    background: var(--surface);
    color: var(--ink);
    font-size: 18px;
    line-height: 1.85;
}

.anatomy-prompt .slot {
    display: inline;
    padding: 0.12rem 0.22rem;
}

.anatomy-prompt .slot-tag {
    margin-right: 0.45rem;
    padding: 0.08rem 0.25rem;
    border: 1px solid currentColor;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

:root {
    --slot-subject: #0c83ad;
    --slot-action: #9a6a00;
    --slot-camera: #2563eb;
    --slot-style: #b91c1c;
    --slot-constraints: #047857;
}

.s-subject { color: var(--slot-subject); }
.s-action { color: var(--slot-action); }
.s-camera { color: var(--slot-camera); }
.s-style { color: var(--slot-style); }
.s-constraints { color: var(--slot-constraints); }

.anatomy-prompt .slot:hover {
    background: currentColor;
    color: #ffffff;
}

.anatomy { max-width: var(--measure); margin: 1rem 0 2rem 0; }

.anatomy-row {
    display: grid;
    grid-template-columns: 14ch minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--ink-12);
}

.anatomy-row:last-child { border-bottom: 0; }

.anatomy-row .key {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.anatomy-row .val {
    color: var(--ink-65);
    font-size: 17px;
    line-height: 1.55;
}

.anatomy-row.highlight {
    background: var(--accent-soft);
}

.slot-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 0.45rem;
    background: currentColor;
}

@media (max-width: 560px) {
    .anatomy-row { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* ----- Real-person / stack sections ----- */

.case {
    max-width: var(--wide);
    margin: 1.75rem 0 2rem 0;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1.2rem;
    align-items: start;
}

.case .clip { margin: 0; }

@media (max-width: 860px) {
    .case { grid-template-columns: 1fr; }
}

.rp-card {
    padding: 0;
    overflow: hidden;
}

.rp-card .clip {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--ink-20);
    border-radius: 0;
}

.rp-card .clip .caption {
    border-top: 1px solid var(--ink-20);
}

.rp-card .body {
    padding: 1rem;
}

.rp-note,
.field-note {
    max-width: var(--wide);
    margin: 2rem 0;
    padding: 1.25rem 0 1.25rem 1.25rem;
    border-left: 2px solid var(--accent);
    overflow-x: auto;
}

.field-note h4 {
    max-width: var(--measure);
}

.field-note-tag {
    margin-bottom: 0.7rem;
    color: var(--accent);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.storyboard-grid img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ink-20);
    border-radius: var(--radius);
    background: var(--surface);
}

.tweet-wrap {
    max-width: 560px;
    margin: 1.5rem 0 2rem 0;
}

.tweet-wrap blockquote.twitter-tweet {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--ink-20);
    background: var(--surface);
    color: var(--ink-65);
}

/* ----- Library catalog ----- */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.4rem 0 2rem 0;
}

.chip {
    min-height: 34px;
    padding: 0.42rem 0.75rem;
    border: 1px solid var(--ink-20);
    border-radius: 0;
    background: transparent;
    color: var(--ink-65);
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.chip:hover,
.chip[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

.library { max-width: var(--wide); }

.lib-group-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    margin: 3rem 0 1rem 0;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--ink-20);
}

.lib-group-head:first-child { margin-top: 0; }

.lib-group-kicker,
.lib-group-count {
    color: var(--ink-50);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lib-group-kicker { color: var(--ink); }

.lib-grid {
    display: grid;
    gap: 1.1rem;
    align-items: stretch;
    grid-auto-rows: 1fr;
    margin-bottom: 1rem;
}

.lib-grid--wide { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.lib-grid--vertical { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.lib-grid--square { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

@media (max-width: 560px) {
    .lib-grid--wide,
    .lib-grid--vertical,
    .lib-grid--square { grid-template-columns: 1fr; }
}

.lib-card {
    display: flex;
    min-width: 0;
    height: auto;
    margin: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ink-20);
    border-radius: var(--radius);
    background: var(--surface);
}

.lib-card .clip {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.lib-card .catalog-caption {
    padding: 0.75rem 0.9rem;
    border-top: 1px solid var(--ink-20);
    border-bottom: 1px solid var(--ink-12);
    background: var(--paper);
}

.lib-card .body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.9rem;
}

.lib-card .teaches {
    margin: 0;
    color: var(--ink-65);
    font-size: 16px;
    line-height: 1.45;
}

.lib-card details { margin-top: 0.25rem; }

.lib-card summary {
    cursor: pointer;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    list-style: none;
    text-transform: uppercase;
}

.lib-card summary::-webkit-details-marker { display: none; }
.lib-card summary::before { content: "+ "; }
.lib-card details[open] summary::before { content: "- "; }
.lib-card details[open] summary { margin-bottom: 0.6rem; }
.lib-card details pre { max-height: 320px; margin: 0; font-size: 12px; }

.lib-spotlight { display: none; }

/* ----- Sources and footer ----- */

.sources {
    max-width: var(--measure);
    columns: 2;
    column-gap: 2rem;
    padding: 0;
    list-style: none;
    font-size: 17px;
}

.sources li {
    break-inside: avoid;
    margin: 0 0 0.45rem 0;
    padding-left: 1.1rem;
    position: relative;
}

.sources li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 12px;
}

@media (max-width: 720px) {
    .sources { columns: 1; }
}

.chapter-nav {
    width: min(100% - 32px, var(--wide));
    margin: 1rem auto 0 auto;
    padding: 2rem 0 4rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    border-top: 1px solid var(--ink-20);
}

.chap-link {
    display: block;
    padding: 0.9rem 0;
    color: var(--ink);
    text-decoration: none;
}

.chap-link .kk {
    display: block;
    color: var(--ink-50);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.chap-link .ll {
    display: block;
    margin-top: 0.25rem;
    font-size: 22px;
    line-height: 1.2;
}

.chap-next { text-align: right; }

footer.foot {
    padding: 3.5rem 0;
    border-top: 1px solid var(--ink-20);
    background: var(--paper);
    color: var(--ink-50);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    line-height: 1.65;
    text-transform: uppercase;
}

footer.foot p { max-width: var(--measure); margin-inline: auto; }

/* ----- Utilities and animation ----- */

.center { text-align: center; }
.mt-7 { margin-top: 3.5rem; }
.mb-0 { margin-bottom: 0; }
.full { width: 100%; }

.reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 700ms ease, transform 700ms ease;
}

.reveal.in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   Final editorial pass.
   ============================================================ */

:root {
    --radius: 0;
}

.section {
    padding: 3.5rem 0;
}

.page-hero {
    padding: 2.8rem 0 3.2rem 0;
}

.page-hero .fluid {
    width: min(100% - 32px, 860px);
}

.page-h1 {
    max-width: 16ch;
    font-size: 62px;
    line-height: 1.02;
}

.page-hero + .section {
    padding-top: 2.75rem;
}

main > .section:first-child:not(.hero--manual):not(.page-hero) {
    padding-top: 3.15rem;
}

#builder,
#library,
#status {
    padding-top: 3.15rem;
}

#builder .page-h1,
#library .page-h1 {
    max-width: none;
    margin-bottom: 0.55rem;
}

#status .page-h1 {
    max-width: 18ch;
}

.section + .section {
    border-top: 0;
}

.topbar {
    border-bottom-color: var(--ink-08);
}

.topbar-inner {
    min-height: 58px;
}

.progress {
    top: 58px;
    height: 1px;
}

@media (max-width: 760px) {
    .progress { top: 110px; }
}

/* Landing opener */

.hero--manual {
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
}

.hero--manual .essay {
    width: min(100% - 32px, 900px);
}

.hero--manual .masthead-h1 {
    max-width: none;
    margin-bottom: 0.42rem;
    font-size: 82px;
    line-height: 0.96;
}

.masthead-sub {
    max-width: 680px;
    margin: 0 0 0.8rem 0;
    color: var(--ink-65);
    font-size: 30px;
    line-height: 1.24;
}

.hero--manual .masthead-byline {
    margin: 0.85rem 0 0 0;
}

.hero--manual .lede,
.hero--manual p:not(.masthead-kicker):not(.masthead-sub):not(.masthead-byline) {
    max-width: 720px;
}

.manual-figure {
    margin: 2.4rem 0 2.55rem 0;
}

.manual-figure--lead {
    width: 300px;
    max-width: 72vw;
    margin-top: 2rem;
    margin-bottom: 2.45rem;
}

.manual-figure--inline {
    width: 245px;
    max-width: 72vw;
    margin-top: 2.8rem;
    margin-bottom: 2.85rem;
}

.manual-figure--inline:nth-of-type(even) {
    margin-left: auto;
}

.clip--bare,
.manual-figure .clip,
.lib-card .clip {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.manual-figure .clip video,
.manual-figure .clip .placeholder,
.lib-card .clip video,
.lib-card .clip .placeholder {
    background: #111111;
}

.manual-figure figcaption,
.coverage-figure figcaption {
    width: max-content;
    max-width: min(90vw, 440px);
    padding-top: 0.7rem;
    color: var(--ink-50);
    font-size: 11px;
    letter-spacing: 0.08em;
    line-height: 1.55;
    text-transform: uppercase;
}

.proof-section {
    padding-top: 1.5rem;
}

.proof-section::before,
#models::before,
#chapters::before {
    content: "";
    display: block;
    width: min(100% - 32px, var(--measure));
    margin: 0 auto 1.5rem auto;
    height: 1px;
    background: var(--ink-12, rgba(0,0,0,0.08));
}

/* Coverage ledger */

.coverage-figure {
    margin: 0;
}

.coverage-figure figcaption {
    margin-bottom: 0.75rem;
    padding-top: 0;
}

.ascii-stats {
    max-width: 100%;
    margin: 0;
    padding: 1rem 1.05rem;
    overflow-x: auto;
    border: 1px solid var(--ink-20);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 12px;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
    letter-spacing: 0;
    line-height: 1.8;
}

.ascii-row {
    display: grid;
    min-width: 760px;
    grid-template-columns: 13ch 22ch 9ch minmax(0, 1fr);
    column-gap: 2ch;
    align-items: baseline;
    padding: 0;
}

.ascii-label {
    color: var(--accent);
    font-weight: 700;
}

.ascii-bar {
    color: var(--ink);
    white-space: nowrap;
}

.ascii-count {
    color: var(--ink-80);
}

.ascii-desc {
    color: var(--ink-50);
    white-space: nowrap;
}

@media (max-width: 760px) {
    .ascii-row {
        grid-template-columns: 13ch 22ch 9ch minmax(0, 1fr);
        row-gap: 0;
        padding: 0;
    }
}

/* Book-style contents */

.toc-list {
    margin-top: 1.35rem;
    border: 0;
}

.toc-row {
    grid-template-columns: 4ch minmax(0, 1fr) 3ch;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 0;
}

.toc-main {
    display: grid;
    grid-template-columns: auto minmax(2rem, 1fr) auto;
    column-gap: 0.7rem;
    align-items: baseline;
}

.toc-title {
    color: var(--ink);
    font-size: 24px;
    line-height: 1.12;
}

.toc-leader {
    border-bottom: 1px dotted var(--ink-35);
    transform: translateY(-0.22rem);
}

.toc-count {
    color: var(--ink-50);
    font-family: var(--font-mono);
    font-size: 11px;
    font-variant-ligatures: none;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.toc-desc {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
    color: var(--ink-50);
    font-size: 16px;
    line-height: 1.38;
}

@media (max-width: 640px) {
    .toc-main {
        grid-template-columns: 1fr;
    }

    .toc-leader,
    .toc-count {
        display: none;
    }
}

/* Printed ledgers and schedules */

.status-list {
    max-width: 860px;
    border: 1px solid var(--ink-20);
    background: var(--surface);
}

.status-list li {
    padding: 0.82rem 0.95rem 0.82rem 3.15rem;
    border-bottom: 1px dotted var(--ink-20);
    font-size: 16px;
    line-height: 1.55;
}

.status-list li:last-child {
    border-bottom: 0;
}

.status-list li::before {
    left: 0.95rem;
    top: 0.98rem;
    width: 3ch;
    font-weight: 700;
}

.cmp-wrap,
.matrix-wrap {
    border: 1px solid var(--ink-20);
    background: var(--surface);
}

.cmp,
.field-note-table {
    font-family: var(--font-mono);
    font-size: 13px;
    font-variant-ligatures: none;
    letter-spacing: 0;
    line-height: 1.5;
}

.cmp th,
.field-note-table th {
    background: var(--ink, #1a1614);
    color: var(--paper, #f7f5f0);
    font-weight: 600;
    letter-spacing: 0.14em;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    position: sticky;
    top: 0;
    z-index: 2;
}

.cmp th,
.cmp td,
.field-note-table th,
.field-note-table td {
    border-bottom: 1px solid rgba(26,22,20,0.18);
    padding: 0.7rem 0.8rem;
}

.field-note-table tbody tr:nth-child(even) {
    background: rgba(26,22,20,0.035);
}
.field-note-table tbody tr:hover {
    background: rgba(236, 74, 31, 0.06);
}

.cmp td:first-child,
.field-note-table td:first-child {
    color: var(--ink, #1a1614);
    font-weight: 600;
    white-space: nowrap;
}

.cmp tr.featured,
.field-note-table tr.featured {
    background: rgba(236, 74, 31, 0.10) !important;
    box-shadow: inset 3px 0 0 var(--accent, #EC4A1F);
}

/* PASS / FAIL cells — pill-style chips, much more legible */
.field-note-table td.ok,
.cmp td.ok {
    color: #0a4d2a;
    background: rgba(34, 139, 80, 0.14);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.field-note-table td.bad,
.cmp td.bad {
    color: #7a1a1a;
    background: rgba(180, 40, 40, 0.10);
    font-family: var(--font-mono);
    font-size: 12px;
    white-space: nowrap;
}

/* Forms and code consoles */

.schema,
.builder {
    border-color: var(--ink);
    background: var(--surface);
}

#builder .builder {
    gap: 0;
    padding: 0;
    border: 1px solid var(--ink);
    background: var(--ink);
}

#builder .builder form {
    padding: 1.15rem;
    background: var(--surface);
}

#builder .builder-output {
    min-height: 100%;
    border: 0;
    border-radius: 0;
}

#builder .builder legend,
.schema-form label,
.copy-btn,
.pre-copy,
.chip {
    font-variant-ligatures: none;
}

input[type="text"],
input[type="number"],
select,
textarea {
    border-color: var(--ink-20);
    background: #fbfbf9;
}

/* Cards remain catalog plates, not dashboards. */

.constraint,
.pattern,
.failure,
.model-card,
.stack,
.method-step,
.rp-card,
.refset,
.lib-card {
    border-color: var(--ink-20);
    box-shadow: none;
}

.constraint {
    border-left-width: 1px;
}

.model-grid,
.patterns,
.failures,
.stacks,
.method-flow,
.realperson-grid,
.storyboard-grid {
    gap: 1.05rem;
}

.lib-group-head {
    margin-top: 3.4rem;
    padding-bottom: 0;
    border-bottom: 0;
}

.lib-card {
    border-radius: 0;
}

.lib-card .catalog-caption {
    border-top: 1px solid var(--ink-20);
    background: var(--surface);
}

.lib-card .body {
    background: var(--paper);
}

.chips {
    gap: 0.45rem;
}

.chip {
    text-decoration: none !important;
}

/* Navigation and footer should read like quiet colophon material. */

.chapter-nav {
    position: relative;
    margin-top: 0;
    padding-top: 4rem;
    border-top: 0;
}

.chapter-nav::before {
    content: ". . .";
    position: absolute;
    top: 1.2rem;
    left: 0;
    color: var(--ink-35);
    font-family: var(--font-mono);
    font-size: 11px;
    font-variant-ligatures: none;
    letter-spacing: 0.16em;
}

footer.foot {
    padding: 2.35rem 0 3rem 0;
    border-top: 0;
    background: transparent;
    font-size: 11px;
    letter-spacing: 0.12em;
}

footer.foot a {
    text-decoration: none;
}

@media (max-width: 900px) {
    .page-h1 {
        font-size: 52px;
    }

    .hero--manual .masthead-h1 {
        font-size: 66px;
    }

    .masthead-sub {
        font-size: 26px;
    }
}

@media (max-width: 560px) {
    .section {
        padding: 3.8rem 0;
    }

    .page-hero {
        padding-top: 2.2rem;
    }

    .hero--manual {
        padding-top: 1.8rem;
    }

    .hero--manual .masthead-h1 {
        font-size: 44px;
        line-height: 1;
    }

    .page-h1 {
        font-size: 40px;
    }

    .masthead-sub {
        font-size: 22px;
    }

    .manual-figure--lead,
    .manual-figure--inline {
        width: 230px;
    }

    .manual-figure figcaption {
        width: auto;
        max-width: 100%;
    }

    .chapter-nav {
        grid-template-columns: 1fr;
    }

    .chap-next {
        text-align: left;
    }
}

/* ----- Uncensored section ----- */
#uncensored .catalog--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 2rem 0 2.5rem;
}
#uncensored .catalog--3 .clip { margin: 0; }
#uncensored .catalog--3 .clip video,
#uncensored .catalog--3 .clip .placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
}
#uncensored .catalog--3 .caption {
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--muted, #555);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
}
#uncensored .catalog--3 .fig-id { font-weight: 600; color: var(--ink, #111); }
@media (max-width: 900px) {
    #uncensored .catalog--3 { grid-template-columns: 1fr; }
}

.ledger-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0 2rem;
    font-size: 0.92rem;
}
.ledger-table th,
.ledger-table td {
    text-align: left;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    vertical-align: top;
}
.ledger-table th {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    color: var(--muted, #555);
    font-weight: 500;
    border-bottom: 1px solid rgba(0,0,0,0.18);
}
.ledger-table td:first-child { font-weight: 500; }

pre.block {
    background: rgba(0,0,0,0.04);
    border-left: 3px solid var(--accent, #2563eb);
    padding: 1rem 1.1rem;
    border-radius: 2px;
    overflow-x: auto;
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1.55;
    margin: 1rem 0 1.75rem;
}
pre.block code {
    font-family: var(--font-mono);
    background: none;
    color: inherit;
    padding: 0;
    white-space: pre;
}

/* ============================================================
   POLISH PASS — 2026-05-04
   Hero scoreboard, model-card pass bars, refined footer/logo.
   ============================================================ */

/* ----- Hero two-up grid ----- */
.hero--manual { padding-top: 4.25rem; padding-bottom: 1rem; }

.hero-grid {
    width: min(100% - 32px, var(--wide));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: 3.5rem;
    align-items: start;
}

.hero-grid .essay { width: 100%; max-width: var(--measure); margin: 0; }

@media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }
    .scoreboard { max-width: 460px; }
}

/* ----- Scoreboard panel ----- */
.scoreboard {
    position: sticky;
    top: 96px;
    padding: 1.15rem 1.2rem 1.05rem;
    border: 1px solid var(--ink-20);
    border-radius: var(--radius);
    background: var(--surface);
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
}

.scoreboard-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--ink-12);
}

.sb-kicker {
    color: var(--ink-50);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sb-meta {
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.sb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
}

.sb-list li {
    display: grid;
    grid-template-columns: 13ch minmax(0, 1fr) 5ch;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 0.6rem;
    font-size: 11px;
    white-space: nowrap;
}

.sb-list li:first-child { margin-top: 0.15rem; }

.sb-list li:last-child { margin-bottom: 0; }

.sb-name {
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.sb-bar {
    position: relative;
    height: 6px;
    background: var(--ink-08);
    border-radius: 1px;
    overflow: hidden;
}

.sb-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    transform-origin: left;
    animation: sbGrow 800ms cubic-bezier(0.2, 0.7, 0.25, 1) both;
}

.sb-bar--muted { background: transparent; border: 1px dashed var(--ink-20); height: 6px; }
.sb-bar--muted .sb-fill { background: transparent; }

@keyframes sbGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.sb-num {
    color: var(--ink-65);
    text-align: right;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.sb-num--muted { color: var(--ink-50); font-style: italic; }

.sb-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.95rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--ink-12);
    color: var(--ink-50);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sb-foot b {
    color: var(--ink);
    font-weight: 600;
    margin-right: 0.25em;
}

/* ----- Model card pass-rate bars ----- */
.model-card {
    position: relative;
    transition: border-color 160ms ease, transform 160ms ease;
}

.model-card:hover {
    border-color: var(--ink-35);
    transform: translateY(-1px);
}

.model-card .badge--pass,
.model-card .badge--note {
    font-feature-settings: "tnum" 1;
}

.model-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: var(--pass-rate, 0%);
    background: var(--accent);
    border-bottom-left-radius: var(--radius);
    transition: width 600ms cubic-bezier(0.2, 0.7, 0.25, 1);
}

/* Set pass-rate per card (Wan 4/5, Seedance 11/12, Kling 3/3, Veo 1/1, others n/a). */
.model-grid > .model-card:nth-child(1) { --pass-rate: 80%; }
.model-grid > .model-card:nth-child(2) { --pass-rate: 91.6%; }
.model-grid > .model-card:nth-child(3) { --pass-rate: 100%; }
.model-grid > .model-card:nth-child(4) { --pass-rate: 100%; }
.model-grid > .model-card:nth-child(5) { --pass-rate: 0%; }
.model-grid > .model-card:nth-child(6) { --pass-rate: 0%; }

/* ----- TOC row polish ----- */
.toc-row {
    transition: background 160ms ease, padding-left 160ms ease;
}

.toc-row:hover {
    background: linear-gradient(90deg, var(--accent-soft), transparent 70%);
    padding-left: 0.75rem;
}

/* ----- Logo: play triangle (subtle nod to "video") ----- */
.topbar-brand .logo {
    position: relative;
    width: 16px;
    height: 16px;
    border: 1px solid var(--accent);
    background: var(--accent);
}

.topbar-brand .logo::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 56%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #fff;
}

/* ----- Footer refinements ----- */
.foot {
    margin-top: 4rem;
    padding: 2.5rem 0 3rem;
    border-top: 1px solid var(--ink-12);
    color: var(--ink-50);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.foot p { margin: 0 0 0.4rem 0; }
.foot a { color: var(--ink-65); }
.foot a:hover { color: var(--accent); }

/* ----- Section-id num accent: slight uplift ----- */
.section-id .num {
    padding: 1px 6px;
    background: var(--accent-soft);
    border-radius: 3px;
}

/* ----- Stickier topbar shadow on scroll-feel ----- */
.topbar { box-shadow: 0 1px 0 var(--ink-08); }

/* ----- Reduce motion ----- */
@media (prefers-reduced-motion: reduce) {
    .sb-fill { animation: none; }
    .toc-row,
    .model-card,
    .toc-row:hover .toc-arrow { transition: none; transform: none; }
}

/* ----- Builder polish ----- */
@media (min-width: 980px) {
    #builder .builder-output {
        position: sticky;
        top: 96px;
        align-self: start;
        max-height: calc(100vh - 120px);
        overflow: auto;
    }
}

#builder .copy-btn {
    width: 100%;
    margin-top: 0.4rem;
    padding-block: 0.7rem;
}

#builder .copy-btn.copied {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

#builder .builder-output { scrollbar-width: thin; }
#builder .builder-output::-webkit-scrollbar { width: 8px; }
#builder .builder-output::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; }

#builder .builder-output::before {
    content: "compiled prompt";
    display: block;
    margin-bottom: 0.6rem;
    color: rgba(255,255,255,0.45);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

#builder .builder-output .json::before {
    content: "request body";
    display: block;
    margin-bottom: 0.6rem;
    color: rgba(255,255,255,0.45);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ----- Status page badge / row polish ----- */

/* Make OK/NO/?? badges feel like real chips */
.status-list li::before {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.status-ok li::before {
    color: var(--success);
    background: rgba(5, 122, 85, 0.10);
    border: 1px solid rgba(5, 122, 85, 0.25);
}

.status-bad li::before {
    color: var(--err);
    background: rgba(185, 28, 28, 0.10);
    border: 1px solid rgba(185, 28, 28, 0.25);
}

.status-warn li::before {
    color: var(--warn);
    background: rgba(154, 106, 0, 0.10);
    border: 1px dashed rgba(154, 106, 0, 0.35);
}

/* Status list row left-rail accents */
.status-list { border-left: 1px solid var(--ink-12); }
.status-ok   { border-left-color: rgba(5, 122, 85, 0.35); }
.status-bad  { border-left-color: rgba(185, 28, 28, 0.35); }
.status-warn { border-left-color: rgba(154, 106, 0, 0.35); }

/* Colored section headers — match the meaning of the list below them */
.status-h {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.status-h::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-35);
}

.status-h:has(+ .status-ok)::before   { background: var(--success); }
.status-h:has(+ .status-bad)::before  { background: var(--err); }
.status-h:has(+ .status-warn)::before { background: var(--warn); }

/* ============================================================
   POLISH PASS 2 — homepage CTAs, verdicts band, headline split
   ============================================================ */

/* Headline soft second line */
.masthead-h1 .h1-soft {
    display: inline-block;
    color: var(--ink-50);
    font-style: italic;
    font-weight: 400;
    font-size: 0.74em;
    line-height: 1.15;
}

/* Wrap better at narrow widths */
.masthead-h1 { max-width: 18ch; }
@media (max-width: 900px) { .masthead-h1 { max-width: 16ch; } }

/* Hero CTAs */
.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.6rem;
}

.cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.62rem 1.05rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 140ms ease, background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.cta--primary {
    background: var(--ink);
    color: var(--bg);
    border: 1px solid var(--ink);
}
.cta--primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}

.cta--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink-35);
}
.cta--ghost:hover {
    border-color: var(--ink);
    color: var(--ink);
    transform: translateY(-1px);
}

/* Promote the trust signal */
.masthead-byline strong {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* ----- Verdicts band ----- */
.verdicts-section {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.verdicts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
}

.verdict {
    position: relative;
    padding: 1.1rem 1.15rem 1.05rem;
    border: 1px solid var(--ink-20);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.verdict::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--ink-35);
}

.verdict--win::before    { background: var(--success); }
.verdict--mixed::before  { background: var(--warn); }
.verdict--fail::before   { background: var(--err); }

.verdict .vk {
    display: inline-block;
    margin-bottom: 0.55rem;
    padding: 1px 7px;
    border-radius: 3px;
    background: var(--ink-08);
    color: var(--ink-65);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.verdict--win .vk    { background: rgba(5, 122, 85, 0.10);  color: var(--success); }
.verdict--mixed .vk  { background: rgba(154, 106, 0, 0.10); color: var(--warn); }
.verdict--fail .vk   { background: rgba(185, 28, 28, 0.10); color: var(--err); }

.verdict h3 {
    margin: 0 0 0.5rem 0;
    max-width: none;
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.verdict p {
    margin: 0;
    color: var(--ink-65);
    font-size: 15px;
    line-height: 1.5;
    max-width: none;
}

@media (max-width: 700px) {
    .hero-cta .cta { padding: 0.55rem 0.9rem; font-size: 11.5px; }
}

/* ----- Intro card: orient cold visitors ----- */
.intro-card {
    margin: 1.5rem 0 1.6rem;
    padding: 1.05rem 1.15rem 1rem;
    border: 1px solid var(--ink-20);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
}

.intro-card-kicker {
    margin: 0 0 0.45rem 0 !important;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.intro-card > p:not(.intro-card-kicker):not(.intro-card-meta) {
    margin: 0 0 0.85rem 0;
    color: var(--ink);
    font-size: 16.5px;
    line-height: 1.55;
    max-width: none;
}

.intro-card strong {
    color: var(--ink);
    font-weight: 600;
}

.intro-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    margin: 0 !important;
    padding-top: 0.65rem;
    border-top: 1px dotted var(--ink-12);
    color: var(--ink-65);
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.55;
    max-width: none !important;
}

.intro-card-meta .ic-tag {
    display: inline-block;
    margin-right: 0.4em;
    color: var(--ink-50);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ----- Brand tagline next to logo ----- */
.topbar-brand {
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
}

.topbar-brand .brand-text {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.01em;
}

.topbar-brand .brand-dot { color: var(--ink-35); margin: 0 0.1em; }

.topbar-brand .brand-tag {
    padding-left: 0.6rem;
    margin-left: 0.05rem;
    border-left: 1px solid var(--ink-12);
    color: var(--ink-50);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.005em;
}

@media (max-width: 760px) {
    .topbar-brand .brand-tag { display: none; }
}

/* Slightly stronger eyebrow contrast (was too light) */
.masthead-kicker { color: var(--ink-65); }

/* Secondary CTA as text-link with arrow */
.cta-link {
    display: inline-flex;
    align-items: center;
    color: var(--ink-65);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 140ms ease, transform 140ms ease;
}
.cta-link:hover {
    color: var(--accent);
    transform: translateX(2px);
}

.hero-cta {
    align-items: center;
    gap: 1rem 1.4rem;
}

/* Scoreboard: "in progress" tag for unscored rows */
.sb-num--muted { font-style: normal; }
.sb-num--muted::before {
    content: "·";
    margin-right: 0.35em;
    color: var(--ink-35);
}

/* ----- Tagline contrast bump + intro card padding ----- */
.topbar-brand .brand-tag {
    color: var(--ink-65);
    font-size: 13.5px;
}

.intro-card { padding: 1.25rem 1.35rem 1.15rem; }

/* "image only" rows: italicize + lighter num */
.sb-num--muted { font-style: italic; color: var(--ink-50); font-size: 10.5px; }

/* Wider sb-num column for "image only" text */
.sb-list li { grid-template-columns: 13ch minmax(0, 1fr) 8ch; }

/* ----- Tighter rhythm between hero and first content ----- */
.hero--manual { padding-bottom: 0.25rem; }
.verdicts-section { padding-top: 0; padding-bottom: 0.5rem; }
.proof-section { padding-top: 1rem !important; }

/* Make the hero CTA visually pop a hair more */
.cta--primary {
    box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 6px 18px -8px rgba(0,0,0,0.18);
}

/* ============================================================
   POLISH PASS 3 — Making-Software-style intentional landing
   ============================================================ */

/* Hero: centered masthead, simple and confident */
.hero--intentional {
    padding-top: 5.5rem;
    padding-bottom: 1.25rem;
    text-align: center;
}

.hero--intentional .essay { text-align: center; }

.hero--intentional .masthead-kicker {
    margin-inline: auto;
    color: var(--ink-65);
}

.hero--intentional .masthead-h1 {
    margin-inline: auto;
    margin-bottom: 1.4rem;
    max-width: 100%;
    font-size: 86px;
    line-height: 1;
    letter-spacing: -0.005em;
}

.hero--intentional .h1-soft {
    display: inline-block;
    margin-top: 0.05em;
    color: var(--ink-50);
    font-style: italic;
    font-weight: 400;
    font-size: 0.78em;
}

.hero--intentional .masthead-sub {
    max-width: 38ch;
    margin: 0 auto 1.2rem;
    color: var(--ink-65);
    font-size: 22px;
    line-height: 1.4;
}

.hero--intentional .masthead-byline {
    margin-top: 0;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .hero--intentional .masthead-h1 { font-size: 60px; }
    .hero--intentional .masthead-sub { font-size: 19px; }
}
@media (max-width: 560px) {
    .hero--intentional .masthead-h1 { font-size: 46px; }
}

/* Hook section */
.hook-section { padding-top: 7rem; padding-bottom: 2rem; scroll-margin-top: 80px; }

.hook-section .essay p {
    font-size: 21px;
    line-height: 1.55;
    color: var(--ink-80);
}

.hook-section .essay p strong { color: var(--ink); font-weight: 600; }

.hook-rule {
    width: auto;
    margin: 2.5rem auto !important;
    color: var(--ink-35);
    text-align: center;
    font-family: var(--font-mono);
    letter-spacing: 0.6em;
    white-space: nowrap;
}

/* Inline hook clips: float right of paragraph */
.hook-fig {
    float: right;
    width: 200px;
    margin: 0.4rem -3.5rem 1.2rem 1.6rem;
}

.hook-fig--right { float: right; margin-right: -3.5rem; }
.hook-fig:nth-of-type(2) { float: left; margin: 0.4rem 1.6rem 1.2rem -3.5rem; }

.hook-fig .clip { margin: 0; }
.hook-fig .clip video,
.hook-fig .clip .placeholder {
    aspect-ratio: 9 / 16;
    max-height: 360px;
}

.hook-fig figcaption {
    margin-top: 0.5rem;
    color: var(--ink-50);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
}

.hook-fig .fig-id {
    color: var(--ink-65);
    font-weight: 600;
    margin-right: 0.4em;
}

@media (max-width: 1080px) {
    .hook-fig,
    .hook-fig:nth-of-type(2) {
        float: none;
        width: 240px;
        margin: 1.5rem auto 2rem;
    }
}

/* Signup section */
.signup-section {
    padding-top: 1rem;
    padding-bottom: 2.25rem;
}

.signup-card {
    margin: 1rem 0 0;
    padding: 1.6rem 1.6rem 1.45rem;
    border: 1px solid var(--ink-20);
    border-radius: var(--radius);
    background: var(--paper);
}

.signup-card h4 {
    margin: 0 0 0.4rem 0;
    font-size: 22px;
    line-height: 1.2;
    max-width: none;
}

.signup-card > p {
    margin: 0 0 1rem 0;
    color: var(--ink-65);
    font-size: 15px;
    line-height: 1.55;
    max-width: 56ch;
}

.signup-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.signup-input {
    flex: 1 1 280px;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--ink-35);
    border-radius: 4px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 13px;
}

.signup-input:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.signup-btn {
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--ink);
    border-radius: 4px;
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}

.signup-btn:hover { background: var(--accent); border-color: var(--accent); }

.signup-fineprint {
    margin: 0.85rem 0 0 0 !important;
    color: var(--ink-50);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Findings grid: scoreboard + verdicts side by side */
.findings-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    margin-top: 1.4rem;
}

.scoreboard--inline { position: relative; top: auto; }

.findings-grid .verdicts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin: 0;
}

@media (max-width: 900px) {
    .findings-grid { grid-template-columns: 1fr; }
}

/* Hero stats strip — shows the work without overdoing it */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 640px;
    margin: 2.4rem auto 0;
    padding: 1.1rem 0.5rem 0.95rem;
    border-top: 1px solid var(--ink-12);
    border-bottom: 1px solid var(--ink-12);
}

.hs-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
}

.hs-num {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.hs-lab {
    color: var(--ink-50);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero--intentional .masthead-byline {
    max-width: 56ch;
    margin-inline: auto;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 12.5px;
    color: var(--ink-65);
}

.hero--intentional .masthead-byline a {
    color: var(--ink);
    text-decoration-thickness: 1px;
}

@media (max-width: 640px) {
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 0.8rem 1.5rem; }
    .hs-num { font-size: 24px; }
}

/* Hero start-line: 3 wayfinding links under stats */
.hero-startline {
    margin: 1.4rem auto 0 !important;
    max-width: none;
    color: var(--ink-50);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-startline a {
    color: var(--ink-65);
    text-decoration: none;
    transition: color 140ms ease;
}

.hero-startline a:hover { color: var(--accent); }
.hero-startline .sep { color: var(--ink-20); margin: 0 0.45em; }

/* Stat label contrast */
.hs-lab { color: var(--ink-65); font-size: 10.5px; font-weight: 500; }

/* Drop the duplicate brand-tag styles that no longer have markup */
.topbar-brand .brand-text { font-size: 13px; }

/* Section anchor scroll-padding */
#hook { scroll-margin-top: 80px; }
#signup { scroll-margin-top: 80px; }

/* Primary start-link treatment */
.hero-startline a.primary {
    color: var(--ink);
    border-bottom: 1px solid var(--ink-35);
    padding-bottom: 1px;
}
.hero-startline a.primary:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Center the start-line tightly */
.hero-startline {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4em 0.7em;
}

/* ============================================================
   POLISH PASS 5 — 2026-05-04 — Hook-figure marginalia
   Move FIG_001 / FIG_002 out of text flow into the right gutter
   so prose runs full measure without awkward wrap.
   ============================================================ */
.hook-section .essay { position: relative; }

.hook-section .hook-fig,
.hook-section .hook-fig--right,
.hook-section .hook-fig:nth-of-type(2) {
    float: none;
    position: absolute;
    right: -260px;
    width: 200px;
    margin: 0;
}

/* First figure: top-right, beside the opening paragraphs */
.hook-section .hook-fig:nth-of-type(1) { top: 0.4rem; }

/* Second figure: lower-right, beside the latter paragraphs */
.hook-section .hook-fig:nth-of-type(2) {
    top: auto;
    bottom: 9rem;
    right: -260px;
    left: auto;
}

.hook-section .hook-fig .clip video,
.hook-section .hook-fig .clip .placeholder {
    aspect-ratio: 9 / 16;
    max-height: 320px;
    width: 100%;
}

@media (max-width: 1240px) {
    .hook-section .hook-fig,
    .hook-section .hook-fig--right,
    .hook-section .hook-fig:nth-of-type(1),
    .hook-section .hook-fig:nth-of-type(2) {
        position: static;
        float: none;
        width: min(260px, 60%);
        margin: 1.4rem auto 1.8rem;
        right: auto; left: auto; top: auto; bottom: auto;
    }
}

/* POLISH PASS 6 - 2026-05-04 - Hook figures inline centered */
.hook-section .essay { position: static; }
.hook-section .hook-fig,
.hook-section .hook-fig--right,
.hook-section .hook-fig:nth-of-type(1),
.hook-section .hook-fig:nth-of-type(2) {
    position: static;
    float: none;
    width: min(280px, 60%);
    margin: 2rem auto 2.4rem auto;
    right: auto; left: auto; top: auto; bottom: auto;
    text-align: center;
}
.hook-section .hook-fig .clip { margin: 0 auto; }
.hook-section .hook-fig .clip video,
.hook-section .hook-fig .clip .placeholder {
    aspect-ratio: 9 / 16;
    max-height: 380px;
    width: 100%;
}
.hook-section .hook-fig figcaption { text-align: center; margin-top: 0.6rem; }

/* ============================================================
   POLISH PASS 7 — 2026-05-04 — Subpage hero unification
   Adds: page-meta line, tally-row chips, hero-close hairline
   Applied to: status / prompt / stack / builder / library
   ============================================================ */

.page-hero .section-id,
#status .section-id,
#builder .section-id,
#library .section-id {
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--ink-55);
    margin-bottom: 1.4rem;
}

.page-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-45);
    margin: 1.2rem 0 1.6rem 0;
}

.tally-row {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.tally {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: rgba(255,255,255,0.6);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.tally .t-num {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.tally--ok   { border-color: rgba(46,140,90,0.35);  background: rgba(46,140,90,0.05); }
.tally--bad  { border-color: rgba(184,68,60,0.35);  background: rgba(184,68,60,0.05); }
.tally--warn { border-color: rgba(176,130,40,0.35); background: rgba(176,130,40,0.05); }

.tally--ok   .t-num { color: var(--success); }
.tally--bad  .t-num { color: var(--err); }
.tally--warn .t-num { color: var(--warn); }

.hero-close {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2.6rem 0 0.4rem 0;
    width: 100%;
    max-width: 64ch;
}

/* Subpages: tighten lede a touch so the hero reads as a unit */
.page-hero .lede { max-width: 64ch; }
.page-hero { padding-bottom: 3.2rem; }



/* ============================================================
   POLISH PASS 8 — 2026-05-04 — Neo Industrial chrome layer
   Refs: Atlas / Nucleus / Funding American Progress / Machine Age Modernism
   ============================================================ */

:root {
    --ni-ink: #0E0E0C;
    --ni-accent: #EC4A1F;
    --ni-rule: rgba(14,14,12,0.18);
    --ni-mono: var(--font-mono);
}

.ni-bezel {
    position: fixed;
    left: 0; right: 0;
    height: 26px;
    background: var(--ni-ink);
    color: #EDE9E0;
    font-family: var(--ni-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 200;
    pointer-events: none;
    user-select: none;
}
.ni-bezel--top    { top: 0; }
.ni-bezel--bottom { bottom: 0; }
.ni-bezel .ni-b-l { opacity: 0.55; }
.ni-bezel .ni-b-mid { opacity: 0.85; }
.ni-bezel .ni-b-r { opacity: 0.55; }

.ni-bezel .ni-b-cta {
    opacity: 1;
    color: var(--accent, #EC4A1F);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.06em;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: opacity 0.15s ease, color 0.15s ease;
    pointer-events: auto;
}
.ni-bezel .ni-b-cta:hover { opacity: 0.75; }

body { padding-top: 26px; padding-bottom: 26px; }
.topbar { top: 26px !important; }

.ni-reg {
    position: fixed;
    width: 14px; height: 14px;
    border: 1px solid var(--ni-ink);
    z-index: 199;
    pointer-events: none;
    opacity: 0.7;
}
.ni-reg--tl { top: 36px;    left: 10px;  border-right: 0;  border-bottom: 0; }
.ni-reg--tr { top: 36px;    right: 10px; border-left: 0;   border-bottom: 0; }
.ni-reg--bl { bottom: 36px; left: 10px;  border-right: 0;  border-top: 0; }
.ni-reg--br { bottom: 36px; right: 10px; border-left: 0;   border-top: 0; }

.ni-rail {
    position: fixed;
    top: 60px; bottom: 60px;
    width: 6px;
    z-index: 198;
    pointer-events: none;
    opacity: 0.55;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--ni-ink) 0,
        var(--ni-ink) 1px,
        transparent 1px,
        transparent 12px
    );
}
.ni-rail--l { left: 4px; }
.ni-rail--r { right: 4px; }

@media (max-width: 880px) {
    .ni-bezel, .ni-reg, .ni-rail { display: none; }
    body { padding-top: 0; padding-bottom: 0; }
    .topbar { top: 0 !important; }
}

.topbar-brand .brand-text::after {
    content: "\00AE";
    font-family: var(--ni-mono);
    font-size: 0.55em;
    vertical-align: super;
    margin-left: 4px;
    opacity: 0.55;
    font-weight: 400;
}

.page-hero .section-id::before { content: "[ "; opacity: 0.5; }
.page-hero .section-id::after  { content: " ]"; opacity: 0.5; }

.tally { border-radius: 0; }

.hero-close {
    border-top: 1px solid var(--ni-ink);
    box-shadow: 0 3px 0 -2px var(--ni-ink);
    margin-top: 2.4rem;
    width: 100%;
    max-width: 100%;
    opacity: 0.85;
}

.start-link.primary,
a.primary {
    color: var(--ni-accent) !important;
    border-bottom-color: var(--ni-accent) !important;
}
.start-link.primary:hover,
a.primary:hover {
    background: var(--ni-accent);
    color: #F4EFE4 !important;
    border-bottom-color: var(--ni-accent) !important;
}


/* PASS 8b - 2026-05-04 - Beef up Neo Industrial chrome visibility */
.ni-reg {
    width: 22px;
    height: 22px;
    border-width: 2px;
    opacity: 0.85;
}
.ni-reg--tl, .ni-reg--tr { top: 38px; }
.ni-reg--bl, .ni-reg--br { bottom: 38px; }

.ni-rail {
    width: 14px;
    opacity: 0.6;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--ni-ink) 0,
        var(--ni-ink) 2px,
        transparent 2px,
        transparent 14px
    );
}
.ni-rail--l { left: 6px; }
.ni-rail--r { right: 6px; }


/* ============================================================
   POLISH PASS 9 — 2026-05-04 — Verdicts page densification
   Goal: kill cards, kill padding, go spec-sheet dense.
   Each verdict = one tight row with a hairline rule above.
   Status header = full-width all-caps band, ticker style.
   Pull orange accent through OK markers.
   ============================================================ */

/* nuke any box / border / left-rail treatment from prior passes */
#status .status-list,
.status-list {
    list-style: none;
    padding: 0 !important;
    margin: 0 0 2.4rem 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ni-ink) !important;
    background: transparent !important;
}

#status .status-list li,
.status-list li {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1.4rem;
    align-items: baseline;
    padding: 0.85rem 0 0.9rem 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ni-rule) !important;
    background: transparent !important;
    font-size: 15.5px;
    line-height: 1.55;
}

#status .status-list li:last-child,
.status-list li:last-child {
    border-bottom: 1px solid var(--ni-ink) !important;
}

/* the OK/NO/?? marker: kill pill, make it a stenciled label in the gutter */
#status .status-list li::before,
.status-list li::before {
    position: static !important;
    display: inline-block;
    width: 64px;
    padding: 2px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: var(--ni-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-align: left;
    line-height: 1;
}

.status-ok  li::before { content: "[ OK ]" !important; color: var(--ni-accent) !important; }
.status-bad li::before { content: "[ NO ]" !important; color: var(--ni-ink) !important; opacity: 0.95; }
.status-warn li::before { content: "[ ?? ]" !important; color: var(--ink-45) !important; }

/* status-bad gets a left strikethrough feel via a small stencil */
.status-bad li {
    background: linear-gradient(
        to right,
        rgba(14,14,12,0.025) 0,
        rgba(14,14,12,0.025) 64px,
        transparent 64px
    ) !important;
}

/* status section header: ticker band, dot becomes a square stencil block */
#status .status-h,
.status-h {
    margin: 3rem 0 0 0 !important;
    padding: 0.5rem 0 0.55rem 0 !important;
    border-top: 2px solid var(--ni-ink) !important;
    border-bottom: 1px solid var(--ni-ink) !important;
    background: transparent !important;
    font-family: var(--ni-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ni-ink);
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

#status .status-h::before,
.status-h::before {
    content: "" !important;
    display: inline-block;
    width: 10px !important;
    height: 10px !important;
    border-radius: 0 !important;
    background: var(--ni-ink) !important;
}

.status-h:has(+ .status-ok)::before   { background: var(--ni-accent) !important; }
.status-h:has(+ .status-bad)::before  { background: var(--ni-ink) !important; }
.status-h:has(+ .status-warn)::before { background: transparent !important; border: 1.5px solid var(--ni-ink) !important; }

/* bold first-clause emphasis in verdict rows: tighten the lockup */
.status-list li b {
    display: inline;
    font-weight: 600;
    color: var(--ni-ink);
}

/* code spans inside verdicts: muted utility, not boxed-card style */
.status-list li code {
    background: rgba(14,14,12,0.05);
    padding: 1px 5px;
    border-radius: 0;
    font-size: 0.88em;
}

/* trailing micro-note at the bottom of the verdicts page (the canonical-record line) */
#status > .container > p:last-child,
#status p:last-of-type {
    font-family: var(--ni-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-45);
    border-top: 1px solid var(--ni-rule);
    padding-top: 1.2rem;
    margin-top: 2.4rem;
}

/* Pull orange accent through one more place: section-id num on every page */
.section-id .num,
.page-hero .section-id .num {
    color: var(--ni-accent) !important;
    font-weight: 600;
}

/* and the ® mark on the brand */
.topbar-brand .brand-text::after {
    color: var(--ni-accent) !important;
    opacity: 0.85 !important;
}



/* PASS 10 - 2026-05-04 - Make ADVAIT JAYANT in bottom bezel clickable */
.ni-b-link {
    color: inherit;
    text-decoration: none;
    pointer-events: auto;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: color 0.15s;
}
.ni-b-link:hover {
    color: var(--ni-accent);
}
/* Reset dimming on the link itself so X (in .ni-b-r) reads as bright as github (in .ni-b-mid) */
.ni-bezel .ni-b-l .ni-b-link,
.ni-bezel .ni-b-r .ni-b-link { opacity: 1; }
.ni-bezel .ni-b-r { opacity: 0.85; }


/* ============================================================
   PASS 11 — 2026-05-05  Hero balance + Hook landing
   - Centre masthead text within its column so the text block
     reads as composed (left-rag was making it feel adrift)
   - Add breathing room above the Hook so 'Start reading' lands
     the question paragraph at the top of the viewport
   - scroll-margin-top accounts for fixed top bezel (26) + topbar (~59)
   ============================================================ */

/* Centre the masthead text within its column */
.hero--filmstrip .hero-grid--contact .essay {
    text-align: center;
}
.hero--filmstrip .hero-grid--contact .essay .masthead-h1,
.hero--filmstrip .hero-grid--contact .essay .masthead-sub,
.hero--filmstrip .hero-grid--contact .essay .masthead-byline,
.hero--filmstrip .hero-grid--contact .essay .masthead-kicker,
.hero--filmstrip .hero-grid--contact .essay .hero-startline {
    margin-left: auto;
    margin-right: auto;
}
.hero--filmstrip .hero-grid--contact .essay .masthead-sub,
.hero--filmstrip .hero-grid--contact .essay .masthead-byline {
    max-width: 56ch;
}
.hero--filmstrip .hero-grid--contact .essay .hero-stats {
    margin-left: auto;
    margin-right: auto;
}

/* Hook lands cleanly under the fixed chrome */
.hook-section {
    scroll-margin-top: 96px;
    padding-top: 3.5rem;
}

/* A touch more space between hero and hook */
.hero--filmstrip + .hook-section {
    margin-top: 1.25rem;
}

@media (max-width: 980px) {
    .hero--filmstrip .hero-grid--contact .essay { text-align: left; }
    .hook-section { scroll-margin-top: 80px; padding-top: 2.5rem; }
}


/* ============================================================
   PASS 12 — 2026-05-05 — Clip modal (replaces native fullscreen)
   - Vertical clips were being letterboxed/cropped by the browser's
     fullscreen on landscape monitors. Modal sizes the stage to the
     clip's actual aspect, so 9:16 stays 9:16.
   - Adds a copy-prompt CTA so the prompt is one click away.
   ============================================================ */

.clip { position: relative; }
.clip .clip-zoom {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.65);
    background: rgba(14,14,12,0.65);
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 4;
    opacity: 0;
    transition: opacity 150ms ease, background 150ms ease;
}
.clip:hover .clip-zoom,
.clip:focus-within .clip-zoom { opacity: 1; }
.clip .clip-zoom:hover { background: var(--ni-accent, #EC4A1F); border-color: var(--ni-accent, #EC4A1F); }

html.modal-open { overflow: hidden; }

.clip-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
}
.clip-modal.open { display: flex; }

.clip-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14,14,12,0.86);
    backdrop-filter: blur(6px);
}
.clip-modal__panel {
    position: relative;
    z-index: 1;
    background: #FAF7EE;
    color: var(--ink, #0E0E0C);
    width: min(1180px, 100%);
    max-height: calc(100vh - 64px);
    border: 1px solid rgba(14,14,12,0.85);
    box-shadow: 0 30px 80px rgba(0,0,0,0.45);
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
    overflow: hidden;
    animation: modalIn 180ms ease-out;
}
@keyframes modalIn {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);  opacity: 1; }
}

.clip-modal__x {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 3;
    background: transparent;
    border: 0;
    color: var(--ink, #0E0E0C);
    font-size: 28px;
    line-height: 1;
    width: 36px;
    height: 36px;
    cursor: pointer;
}
.clip-modal__x:hover { color: var(--ni-accent, #EC4A1F); }

.clip-modal__stage {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 320px;
    max-height: calc(100vh - 64px);
    overflow: hidden;
}
.clip-modal__stage[data-aspect="16:9"]  { aspect-ratio: 16 / 9; }
.clip-modal__stage[data-aspect="21:9"]  { aspect-ratio: 21 / 9; }
.clip-modal__stage[data-aspect="9:16"]  { aspect-ratio: 9 / 16; }
.clip-modal__stage[data-aspect="3:4"]   { aspect-ratio: 3 / 4; }
.clip-modal__stage[data-aspect="4:3"]   { aspect-ratio: 4 / 3; }
.clip-modal__stage[data-aspect="1:1"]   { aspect-ratio: 1 / 1; }

.clip-modal__video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}

.clip-modal__meta {
    padding: 24px 24px 24px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-left: 1px solid rgba(14,14,12,0.12);
}
.clip-modal__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.clip-modal__id {
    font-family: var(--ni-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-50, rgba(14,14,12,0.55));
}
.clip-modal__title {
    margin: 0;
    font-family: var(--font-serif, "EB Garamond", Georgia, serif);
    font-size: 26px;
    line-height: 1.18;
    font-weight: 500;
}
.clip-modal__schema {
    font-family: var(--ni-mono, ui-monospace, monospace);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-65, rgba(14,14,12,0.7));
    border-top: 1px solid rgba(14,14,12,0.12);
    padding-top: 10px;
}
.clip-modal__teaches {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink, #0E0E0C);
}

.clip-modal__prompt-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.clip-modal__prompt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.clip-modal__prompt-label {
    font-family: var(--ni-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ink-50, rgba(14,14,12,0.55));
}
.clip-modal__copy {
    border: 1px solid var(--ink, #0E0E0C);
    background: var(--ink, #0E0E0C);
    color: #FAF7EE;
    padding: 7px 14px;
    font-family: var(--ni-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.clip-modal__copy:hover { background: var(--ni-accent, #EC4A1F); border-color: var(--ni-accent, #EC4A1F); }
.clip-modal__copy.ok { background: #2F7D32; border-color: #2F7D32; }

.clip-modal__prompt {
    margin: 0;
    background: #F2EEE2;
    border: 1px solid rgba(14,14,12,0.18);
    padding: 14px 16px;
    font-family: var(--ni-mono, ui-monospace, monospace);
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-height: 360px;
    overflow-y: auto;
}

@media (max-width: 880px) {
    .clip-modal { padding: 0; }
    .clip-modal__panel {
        grid-template-columns: 1fr;
        max-height: 100vh;
        height: 100vh;
        border: 0;
    }
    .clip-modal__stage {
        max-height: 50vh;
        min-height: 220px;
    }
    .clip-modal__meta {
        border-left: 0;
        border-top: 1px solid rgba(14,14,12,0.12);
    }
    .clip-modal__title { font-size: 22px; }
}


/* ============================================================
   PASS 15 — NATIVE CARDS, UNIFORM MODAL
   Cards keep their native aspect (vertical = tall, 21:9 = wide).
   Modal is the equalizer: uniform 16:9 black frame with object-fit
   contain so any clip pillarboxes/letterboxes into the same shape.
   ============================================================ */

/* Wrapper aspect must follow data-aspect, not be forced */
.clip { background: #000; overflow: hidden; }
.clip[data-aspect="16:9"] { aspect-ratio: 16 / 9; }
.clip[data-aspect="21:9"] { aspect-ratio: 21 / 9; }
.clip[data-aspect="9:16"] { aspect-ratio: 9 / 16; max-width: 360px; margin-inline: auto; }
.clip[data-aspect="3:4"]  { aspect-ratio: 3 / 4;  max-width: 480px; margin-inline: auto; }
.clip[data-aspect="1:1"]  { aspect-ratio: 1 / 1;  max-width: 520px; margin-inline: auto; }
.clip[data-aspect="4:3"]  { aspect-ratio: 4 / 3;  max-width: 640px; margin-inline: auto; }

.clip video,
.clip .placeholder {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    background: #000 !important;
    max-height: none !important;
}

/* Contact sheet stays uniform 16:9 — that's the at-a-glance grid */
.cs-cell {
    aspect-ratio: 16 / 9 !important;
    background: #000 !important;
    overflow: hidden;
}
.cs-cell video, .cs-cell .placeholder {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; background: #000 !important;
    aspect-ratio: auto !important;
}

/* Modal: uniform 16:9 black stage; vertical clips pillarbox, ultrawide letterbox */
.clip-modal__panel { align-items: stretch !important; }
.clip-modal__stage,
.clip-modal__stage[data-aspect="16:9"],
.clip-modal__stage[data-aspect="21:9"],
.clip-modal__stage[data-aspect="9:16"],
.clip-modal__stage[data-aspect="3:4"],
.clip-modal__stage[data-aspect="4:3"],
.clip-modal__stage[data-aspect="1:1"] {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    align-self: start !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.clip-modal__video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
    aspect-ratio: auto !important;
}


/* ============================================================
   PASS 16 — 2026-05-05 — Multi-model builder UI
   Model picker tabs + conditional fieldsets + builder tips
   ============================================================ */

.model-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.model-tab {
    position: relative;
    cursor: pointer;
    user-select: none;
}
.model-tab input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.model-tab > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid rgba(14,14,12,0.22);
    background: rgba(255,255,255,0.5);
    transition: border-color 120ms, background 120ms;
}
.model-tab > span > strong {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ni-ink, #0E0E0C);
}
.model-tab > span > em {
    font-style: normal;
    font-size: 11px;
    color: var(--ink-45, rgba(14,14,12,0.55));
}
.model-tab input[type="radio"]:checked + span {
    border-color: var(--ni-accent, #EC4A1F);
    background: rgba(236, 74, 31, 0.07);
    box-shadow: inset 0 0 0 1px var(--ni-accent, #EC4A1F);
}
.model-tab input[type="radio"]:focus-visible + span {
    outline: 2px solid var(--ni-accent, #EC4A1F);
    outline-offset: 2px;
}

.model-guidance {
    margin-top: 10px;
    padding: 8px 10px;
    border-left: 2px solid var(--ni-accent, #EC4A1F);
    background: rgba(14,14,12,0.04);
    font-size: 13px;
    line-height: 1.5;
}

fieldset.conditional[style*="display: none"] { display: none !important; }

.builder-tips {
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--ni-rule, rgba(14,14,12,0.18));
}
.builder-tips .model-notes {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
    display: grid;
    gap: 0.8rem;
}
.builder-tips .model-notes li {
    padding: 0.6rem 0.8rem;
    border-left: 2px solid var(--ni-rule, rgba(14,14,12,0.18));
    font-size: 14px;
    line-height: 1.55;
}
.builder-tips .model-notes li strong {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ============================================================
   PASS 17 — 2026-05-05 — Homepage evidence strip + dynamic models
   Six paid renders right under the hero, mixed aspects, native
   shape. Click any → modal pillarbox stage + prompt panel.
   ============================================================ */

.evidence-strip { background: rgba(14,14,12,0.025); }

.evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 1.4rem;
}
@media (max-width: 900px) { .evidence-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .evidence-grid { grid-template-columns: 1fr; } }

.ev-card { margin: 0; }
.ev-card .clip { background: #000; overflow: hidden; }
.ev-card .clip[data-aspect="9:16"]  { aspect-ratio: 9 / 16; max-width: 320px; margin-inline: auto; }
.ev-card .clip[data-aspect="21:9"]  { aspect-ratio: 21 / 9; }
.ev-card .clip[data-aspect="16:9"]  { aspect-ratio: 16 / 9; }
.ev-card .clip video,
.ev-card .clip .placeholder {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.ev-cap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0 0 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-65, rgba(14,14,12,0.78));
}
.ev-headline {
    font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
    font-size: 16px;
    letter-spacing: 0;
    color: var(--ni-ink, #0E0E0C);
}
.ev-meta { text-transform: uppercase; }
.ev-pass {
    color: var(--ni-accent, #EC4A1F);
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Make the home page model grid look hand-tagged */
.model-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 1.6rem;
}
@media (max-width: 720px) { .model-grid { grid-template-columns: 1fr; } }

.model-card {
    padding: 18px 18px 16px 18px;
    border: 1px solid rgba(14,14,12,0.18);
    background: rgba(255,255,255,0.55);
}
.model-card .m-role {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-45, rgba(14,14,12,0.55));
    margin-bottom: 6px;
}
.model-card h4 {
    font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
    font-size: 22px;
    margin: 0 0 8px 0;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.model-card .badge {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid currentColor;
}
.badge--pass { color: #1f7a4a; }
.badge--mixed { color: var(--ni-accent, #EC4A1F); }
.badge--note { color: var(--ink-45, rgba(14,14,12,0.55)); }

/* ============================================================
   PASS 18 — 2026-05-05 — Evidence panel: copy left, 2×3 grid right
   ============================================================ */
.evidence-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.4fr);
    gap: 36px;
    align-items: start;
}
@media (max-width: 980px) {
    .evidence-layout { grid-template-columns: 1fr; gap: 24px; }
}
.evidence-copy { padding-top: 0.4rem; }
.evidence-copy .section-h3 { margin-top: 0.4rem; }

.evidence-grid--2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.evidence-grid--2col .ev-card .clip {
    aspect-ratio: 16 / 9 !important;   /* uniform tiles for the panel */
    max-width: none !important;
    margin-inline: 0 !important;
}
.evidence-grid--2col .ev-card .clip[data-aspect="9:16"] {
    /* vertical clips letterbox into the 16:9 tile so the panel reads as a unified block */
    background: #000;
}
.evidence-grid--2col .ev-card .clip video,
.evidence-grid--2col .ev-card .clip .placeholder {
    object-fit: cover !important;
}
.evidence-grid--2col .ev-card .clip[data-aspect="9:16"] video,
.evidence-grid--2col .ev-card .clip[data-aspect="3:4"] video {
    object-fit: contain !important;
}
.evidence-grid--2col .ev-cap { padding-top: 6px; gap: 1px; }
.evidence-grid--2col .ev-headline { font-size: 14px; line-height: 1.3; }
.evidence-grid--2col .ev-meta { font-size: 10px; }

/* ============================================================
   PASS 19 — 2026-05-05 — Cofounder.co system, applied honestly
   Real measurements from cofounder.co:
   - body bg #F5F5F2 (warm off-white, not yellow cream)
   - body color #171717 (neutral near-black)
   - typeface: neoris sans-serif throughout (we use Inter / system sans)
   - h1 46px / weight 400 / line-height 1.08
   - h2 40px / weight 400 / line-height 1.15
   - h3 20px / weight 440 / letter-spacing -0.4px
   - heavy whitespace, small meta labels in mono
   We KEEP the serif (EB Garamond) for our hero h1 only — that is OUR
   editorial differentiator. Everywhere else we swap to clean sans like
   cofounder. The Neo Industrial chrome (bezels, registration marks,
   hazard accent) stays — that's our identity.
   ============================================================ */

:root {
    --bg: #F5F5F2;
    --paper: #FAFAF7;
    --ink: #171717;
    --ink-65: rgba(23,23,23,0.72);
    --ink-45: rgba(23,23,23,0.50);
    --ink-25: rgba(23,23,23,0.28);
    --rule: rgba(23,23,23,0.12);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Hero H1 keeps the serif — that's our voice */
.masthead-h1, .page-h1 {
    font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
    font-weight: 500;
    font-size: clamp(40px, 5.4vw, 76px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 1.2rem 0;
}
.masthead-h1 .h1-soft, .page-h1 em { font-style: italic; color: var(--ink-65); }

/* Section H2 / H3 — sans, light weight, breathing room */
h2, .section-h2 {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin: 0 0 0.8rem 0;
}
h3, .section-h3 {
    font-family: var(--font-sans);
    font-weight: 440;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 0.6rem 0;
}
h4 {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 0.4rem 0;
}

/* Lede paragraph: lighter, larger, calmer */
.lede {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-65);
    max-width: 64ch;
    margin: 0 0 1.6rem 0;
    font-weight: 400;
}

/* Section ID — mono micro-label */
.section-id {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-45);
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-id .num { color: var(--ni-accent, #EC4A1F); }

/* Section spacing — generous like cofounder (~120px between sections) */
section.section, .section {
    padding: 5.5rem 0 5rem 0;
}
@media (max-width: 720px) { section.section, .section { padding: 3.5rem 0 3rem 0; } }
.section + .section { padding-top: 0; }
.section + .section::before {
    content: "";
    display: block;
    height: 1px;
    background: var(--rule);
    margin: 0 auto;
    max-width: 1180px;
}

/* Hero stats — cofounder-style: serif numbers, mono labels, hairline divider */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 2.4rem 0 1.6rem 0;
    padding: 1.6rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
@media (max-width: 720px) { .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.hs-item { display: flex; flex-direction: column; gap: 6px; }
.hs-num {
    font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.hs-lab {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-45);
}

/* Hero startline — mono pill links, cofounder uses small ALL-CAPS */
.hero-startline {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 1.4rem;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.hero-startline a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink-25);
    padding-bottom: 2px;
    transition: border-color 150ms;
}
.hero-startline a.primary {
    color: var(--ni-accent, #EC4A1F);
    border-color: var(--ni-accent, #EC4A1F);
}
.hero-startline a:hover { border-color: currentColor; }
.hero-startline .sep { color: var(--ink-25); }

/* TOC — cofounder chapter-card style: 2-col grid, hairline borders, large serif numerals */
.toc-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 2rem;
}
@media (max-width: 720px) { .toc-list { grid-template-columns: 1fr; } }
.toc-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    padding: 22px 24px;
    background: var(--paper);
    border: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    transition: border-color 160ms, transform 160ms;
    align-items: start;
}
.toc-row:hover {
    border-color: var(--ni-accent, #EC4A1F);
    transform: translateY(-1px);
}
.toc-num {
    font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--ni-accent, #EC4A1F);
    line-height: 1;
    padding-top: 4px;
    min-width: 32px;
}
.toc-main { display: grid; grid-template-columns: 1fr; gap: 4px; }
.toc-title {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.toc-leader { display: none; }
.toc-count {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ni-accent, #EC4A1F);
    margin-top: 2px;
}
.toc-desc {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink-65);
    line-height: 1.5;
    margin-top: 4px;
}
.toc-arrow {
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--ink-25);
    font-size: 18px;
    padding-top: 8px;
    transition: color 160ms, transform 160ms;
}
.toc-row:hover .toc-arrow { color: var(--ni-accent, #EC4A1F); transform: translateX(2px); }

/* Verdict cards — cleaner cofounder-style */
.verdicts { display: grid; gap: 16px; }
.verdict {
    padding: 22px 24px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--ni-accent, #EC4A1F);
}
.verdict--win    { border-left-color: #1f7a4a; }
.verdict--mixed  { border-left-color: #C97A1F; }
.verdict--fail   { border-left-color: #B33A3A; }
.verdict .vk {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-45);
    display: block;
    margin-bottom: 6px;
}
.verdict h3 {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 6px 0;
}
.verdict p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-65);
    margin: 0;
}

/* Model cards — uniform sans-serif, hairline borders */
.model-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 2rem;
}
@media (max-width: 720px) { .model-grid { grid-template-columns: 1fr; } }
.model-card {
    padding: 22px 24px;
    background: var(--paper);
    border: 1px solid var(--rule);
    transition: border-color 160ms;
}
.model-card:hover { border-color: var(--ni-accent, #EC4A1F); }
.model-card .m-role {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-45);
    margin-bottom: 8px;
}
.model-card h4 {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 10px 0;
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.model-card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-65);
    margin: 0;
}
.model-card .badge {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 7px;
    border: 1px solid currentColor;
    font-weight: 500;
}
.badge--pass { color: #1f7a4a; }
.badge--mixed { color: #C97A1F; }
.badge--fail { color: #B33A3A; }
.badge--note { color: var(--ink-45); }

/* Findings grid: scoreboard left, verdicts right (cofounder-style 2-col feature row) */
.findings-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.7fr) minmax(320px, 1.3fr);
    gap: 32px;
    margin-top: 2rem;
    align-items: start;
}
@media (max-width: 900px) { .findings-grid { grid-template-columns: 1fr; gap: 20px; } }

/* Scoreboard cleaner */
.scoreboard {
    padding: 22px;
    background: var(--paper);
    border: 1px solid var(--rule);
}
.scoreboard-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 14px;
}
.sb-kicker {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-45);
}
.sb-meta {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    color: var(--ni-accent, #EC4A1F);
    font-weight: 500;
}
.sb-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sb-list li {
    display: grid;
    grid-template-columns: 90px 1fr 50px;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
}
.sb-name { color: var(--ink); font-weight: 500; }
.sb-bar {
    height: 6px;
    background: rgba(23,23,23,0.06);
    border-radius: 0;
    overflow: hidden;
    position: relative;
}
.sb-fill {
    height: 100%;
    background: var(--ni-accent, #EC4A1F);
    display: block;
}
.sb-num { color: var(--ink-65); text-align: right; }
.sb-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-45);
}
.sb-foot b { color: var(--ink); font-weight: 600; }

/* Hook section — narrow editorial column with serif body for the long-form opener */
.hook-section .essay > p {
    font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
    font-size: 19px;
    line-height: 1.6;
    color: var(--ink);
    max-width: 64ch;
    margin: 0 auto 1.4rem auto;
}
.hook-section .essay > p em { color: var(--ink-65); }
.hook-section .essay > p strong {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ni-accent, #EC4A1F);
    font-weight: 600;
    background: rgba(236,74,31,0.08);
    padding: 1px 6px;
}
.hook-rule {
    text-align: center;
    color: var(--ink-25);
    letter-spacing: 1em;
    margin: 2.4rem 0 !important;
}

/* Signup card — cofounder uses the panel pattern */
.signup-card {
    padding: 2.4rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    text-align: center;
    max-width: 540px;
    margin: 0 auto;
}
.signup-card h4 {
    font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 0.6rem 0;
    letter-spacing: -0.01em;
}
.signup-card p {
    font-size: 14px;
    color: var(--ink-65);
    line-height: 1.55;
    margin: 0 0 1.2rem 0;
}
.signup-form {
    display: flex;
    gap: 8px;
    margin-bottom: 0.6rem;
}
.signup-input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    background: #fff;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink);
}
.signup-input:focus {
    outline: none;
    border-color: var(--ni-accent, #EC4A1F);
}
.signup-btn {
    padding: 12px 18px;
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 150ms;
    font-weight: 600;
}
.signup-btn:hover { background: var(--ni-accent, #EC4A1F); border-color: var(--ni-accent, #EC4A1F); }
.signup-fineprint {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-45);
    margin: 0;
}

/* Topbar — cleaner */
.topbar {
    background: rgba(245,245,242,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
}
.topbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topbar-brand {
    font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.005em;
}
.topbar nav {
    display: flex;
    gap: 22px;
}
.topbar nav a {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-65);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: color 150ms, border-color 150ms;
}
.topbar nav a:hover,
.topbar nav a[aria-current="page"] {
    color: var(--ni-accent, #EC4A1F);
    border-color: var(--ni-accent, #EC4A1F);
}

/* Hero — center-aligned with breathing room */
.hero {
    padding: 7rem 0 5rem 0;
    text-align: center;
}
@media (max-width: 720px) { .hero { padding: 4rem 0 3rem 0; } }
.hero .essay { max-width: 780px; margin: 0 auto; padding: 0 24px; }
.masthead-kicker {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-45);
    margin: 0 0 1.6rem 0;
}
.masthead-sub {
    font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
    font-style: italic;
    font-size: 22px;
    line-height: 1.45;
    color: var(--ink-65);
    max-width: 56ch;
    margin: 0 auto 1.2rem auto;
}
.masthead-byline {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink-65);
    margin: 0 auto;
    max-width: 56ch;
}
.masthead-byline a { color: var(--ni-accent, #EC4A1F); text-decoration: none; border-bottom: 1px solid currentColor; }

/* Container width */
.fluid, .container, .essay {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}
.essay { max-width: 780px; }

/* Evidence panel headings/copy in new system */
.evidence-strip { background: transparent; }
.evidence-copy .lede { font-size: 16px; }

/* ============================================================
   PASS 20 — 2026-05-05 — Cofounder.co design tokens, applied
   Direct lift of the design system from cofounder.co:
   - Warmer cream surface (#f5f5f2)
   - Warm dark ink (NOT #000) at varied opacity
   - Hairline borders (#dee2de, 0.5px)
   - Glass pill chrome
   - Accent brown (#a76451) as a richer alternative to hazard orange
   - Editorial serif headlines at weight 500 only
   ============================================================ */

:root {
    /* Surface */
    --cf-bg: #f5f5f2;
    --cf-surface: #f5f5f2;
    --cf-surface-raised: #fbfbf8;
    --cf-surface-darker: #e7e7e3;

    /* Borders — hairline, low contrast */
    --cf-border-card: #dee2de;
    --cf-border-pill: #e3e3e0;
    --cf-hairline: rgba(38, 35, 35, 0.12);

    /* Ink — warm dark at varied opacity */
    --cf-ink-strongest: #262323e6;   /* h1, h2 */
    --cf-ink-strong: #262323d9;       /* h3, body strong */
    --cf-ink: #262323cc;              /* body */
    --cf-ink-muted: #262323b3;        /* secondary text */
    --cf-ink-faint: #26232380;        /* labels, captions */

    /* Accent: warm terracotta, not hazard orange */
    --cf-accent: #a76451;
    --cf-accent-soft: rgba(167, 100, 81, 0.10);
    --cf-lime: #bbf451;               /* secondary punch for "PASS" badges, etc */

    /* Override existing tokens to match */
    --bg: var(--cf-bg);
    --paper: var(--cf-surface-raised);
    --ink-warm: var(--cf-ink-strongest);
    --ink-45: var(--cf-ink-faint);
    --ink-65: var(--cf-ink-muted);
    --ni-rule: var(--cf-hairline);
    --ni-accent: var(--cf-accent);
    --ni-ink: var(--cf-ink-strongest);
}

body {
    background: var(--cf-bg) !important;
    color: var(--cf-ink-strong);
    font-feature-settings: "ss01", "ss02";
}

/* Headlines — weight 500, generous letter-spacing tight */
h1, h2, h3, .page-h1, .section-h3, .masthead-h1 {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.05;
    color: var(--cf-ink-strongest);
}
.masthead-h1 { font-size: clamp(48px, 7vw, 96px); }
.page-h1     { font-size: clamp(40px, 5.4vw, 76px); }
h2.section-h3, .section-h3 { font-size: clamp(28px, 3.4vw, 44px); }

/* Body — Inter for UI text, EB Garamond for essay prose */
.essay p, .essay li {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    line-height: 1.55;
    color: var(--cf-ink-strong);
}
.lede {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 19px;
    line-height: 1.5;
    color: var(--cf-ink-muted);
    max-width: 64ch;
}

/* Cards — hairline border, raised paper, NO shadow */
.toc-row, .model-card, .verdict, .ev-card .clip {
    background: var(--cf-surface-raised);
    border: 0.5px solid var(--cf-border-card);
    border-radius: 4px;       /* small radius, not pill */
    box-shadow: none;
}
.toc-row:hover, .model-card:hover, .verdict:hover {
    border-color: var(--cf-ink-faint);
    transform: none;
}

/* Glassmorphic pill (cofounder uses this for nav + small CTAs) */
.cf-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 0.5px solid var(--cf-border-pill);
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--cf-ink-strong);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.cf-pill:hover { border-color: var(--cf-ink-muted); background: rgba(255,255,255,0.85); }

/* Chapter card label (cofounder's "Chapter I by Cofounder 2026" treatment) */
.cf-chapter-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cf-ink-faint);
    padding-bottom: 12px;
    border-bottom: 0.5px solid var(--cf-border-card);
    margin-bottom: 14px;
}
.cf-chapter-label::after { content: "—"; opacity: 0.5; flex: 1; text-align: right; letter-spacing: 0; }

/* Bezel — slimmer, mono, blends with cream not contrast black */
.ni-bezel {
    background: rgba(38, 35, 35, 0.94) !important;
    color: rgba(245, 245, 242, 0.92) !important;
    font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
    font-size: 9.5px !important;
    letter-spacing: 0.16em !important;
    height: 22px !important;
}
.ni-b-link { color: var(--cf-lime) !important; border-color: var(--cf-lime) !important; }
.ni-b-link:hover { color: #fff !important; border-color: #fff !important; }

/* Topbar — cleaner, less industrial, more editorial */
.topbar {
    background: rgba(245, 245, 242, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 0.5px solid var(--cf-border-card);
    box-shadow: none;
}
.topbar nav a {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cf-ink-strong);
    padding: 6px 10px;
    border-radius: 999px;
    transition: background .15s;
}
.topbar nav a:hover { background: var(--cf-surface-darker); }
.topbar nav a[aria-current="page"] {
    color: var(--cf-accent);
    background: var(--cf-accent-soft);
}

/* Stronger evidence panel layout — 12-col aware */
.evidence-strip {
    background: var(--cf-surface);
    border-top: 0.5px solid var(--cf-border-card);
    border-bottom: 0.5px solid var(--cf-border-card);
}
.evidence-grid--2col .ev-card .clip {
    border-radius: 6px;
    overflow: hidden;
}
.evidence-grid--2col .ev-card .clip[data-aspect="9:16"] {
    background: #1a1612;
}

/* Verdict cards (the orange/green/red 3-row) — cofounder-style hairlines */
.verdict {
    padding: 18px 20px;
    background: var(--cf-surface-raised);
    border-left: 3px solid var(--cf-border-card);
    border-top: 0.5px solid var(--cf-border-card);
    border-right: 0.5px solid var(--cf-border-card);
    border-bottom: 0.5px solid var(--cf-border-card);
}
.verdict--win  { border-left-color: var(--cf-feature-success, #34a853); }
.verdict--mixed { border-left-color: var(--cf-accent); }
.verdict--fail { border-left-color: #c44; }
.verdict .vk {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cf-ink-faint);
}
.verdict h3 {
    font-size: 22px;
    margin: 6px 0 8px 0;
}

/* Findings grid — copy left, scoreboard right (cofounder uses this exact pattern) */
.findings-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.4fr);
    gap: 36px;
    align-items: start;
    margin-top: 1.6rem;
}
@media (max-width: 980px) {
    .findings-grid { grid-template-columns: 1fr; }
}

/* Scoreboard — flatter, mono labels */
.scoreboard {
    background: var(--cf-surface-raised);
    border: 0.5px solid var(--cf-border-card);
    padding: 18px;
    border-radius: 6px;
}
.scoreboard-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 10px;
    border-bottom: 0.5px solid var(--cf-border-card);
    margin-bottom: 12px;
}
.sb-kicker {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--cf-ink-faint);
}
.sb-meta {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    color: var(--cf-accent);
}
.sb-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sb-list li { display: grid; grid-template-columns: 90px 1fr 56px; gap: 10px; align-items: center; }
.sb-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 14px;
    color: var(--cf-ink-strong);
}
.sb-bar {
    height: 6px; background: var(--cf-surface-darker); border-radius: 3px; overflow: hidden;
    position: relative;
}
.sb-fill {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: var(--cf-accent);
    transition: width .3s;
}
.sb-num {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px; text-align: right; color: var(--cf-ink-muted);
}
.sb-foot {
    display: flex; gap: 16px; padding-top: 10px;
    border-top: 0.5px solid var(--cf-border-card);
    margin-top: 12px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.08em;
    color: var(--cf-ink-faint);
}
.sb-foot b { color: var(--cf-ink-strong); margin-right: 4px; font-weight: 500; }

/* Section spacing — generous, cofounder-style */
.section { padding: clamp(48px, 7vw, 96px) 0; }
.section + .section { border-top: 0.5px solid var(--cf-border-card); }

/* Hero — top padding accounts for slimmer bezel + topbar */
.hero { padding-top: clamp(64px, 8vw, 120px); }

/* Hero stats — smaller, mono labels (already added in PASS 19, polish here) */
.hero-stats { border-color: var(--cf-border-card); }
.hs-num { color: var(--cf-accent); font-weight: 500; }

/* Editorial paragraphs in essay sections */
.essay { max-width: 680px; margin: 0 auto; }
.essay p + p { margin-top: 1.1em; }

/* Subtle paragraph mark glyphs */
/* Section mark: subtle inline label instead of a full-width grey band */
.section[data-mark] { position: relative; }
.section[data-mark]::before {
    content: attr(data-mark);
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cf-ink-faint);
    opacity: 0.55;
    pointer-events: none;
}
@media (max-width: 720px) { .section[data-mark]::before { top: 0.9rem; left: 1rem; } }

/* Buttons — cofounder uses pill style with ink fill */
.copy-btn, .signup-btn, button.copy-btn {
    background: var(--cf-ink-strongest);
    color: var(--cf-bg);
    border: none;
    padding: 10px 18px;
    border-radius: 999px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.copy-btn:hover, .signup-btn:hover { background: var(--cf-accent); transform: translateY(-1px); }
.copy-btn.copied { background: #34a853; }

/* Modal — cofounder-style cream panel, terracotta accent on the X close */
.clip-modal__panel {
    background: var(--cf-surface-raised) !important;
    border: 0.5px solid var(--cf-border-card) !important;
    border-radius: 8px !important;
    box-shadow: 0 30px 80px rgba(38,35,35,0.18) !important;
}
.clip-modal__x:hover { color: var(--cf-accent) !important; }
.clip-modal__title {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 500;
    color: var(--cf-ink-strongest);
}
.clip-modal__id, .clip-modal__schema, .clip-modal__prompt-label {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cf-ink-faint);
}
.clip-modal__prompt {
    background: var(--cf-bg) !important;
    border: 0.5px solid var(--cf-border-card) !important;
    border-radius: 4px;
    padding: 12px 14px !important;
    font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: var(--cf-ink-strongest) !important;
}
.clip-modal__copy {
    background: var(--cf-ink-strongest) !important;
    color: var(--cf-bg) !important;
    border: none !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}
.clip-modal__copy:hover { background: var(--cf-accent) !important; }
.clip-modal__copy.ok { background: #34a853 !important; }

/* Topbar logo — restrained */
.topbar-brand {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.005em;
    color: var(--cf-ink-strongest);
    text-decoration: none;
}
.topbar-brand .brand-text { color: var(--cf-ink-strongest); }
.topbar-brand .brand-dot { color: var(--cf-accent); }

/* ============================================================
   PASS 21 — 2026-05-05 — Hero rhythm + scoreboard prominence (cofounder critique)
   - Hero stats: numerals 64-96px serif terracotta
   - Tighten hero top padding
   - Hairline rule above stats acts as the editorial flourish
   ============================================================ */

.hero { padding-top: clamp(40px, 5vw, 84px) !important; padding-bottom: clamp(48px, 6vw, 88px) !important; }
.hero .essay { max-width: 900px; }

.hero-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 1.6rem 0 1.4rem 0;
    border-top: 1px solid var(--cf-ink-strongest);
    border-bottom: 0.5px solid var(--cf-border-card);
    margin-top: 2.2rem !important;
}
.hs-num {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(48px, 6vw, 80px) !important;
    line-height: 0.95 !important;
    color: var(--cf-accent) !important;
    letter-spacing: -0.025em !important;
    font-feature-settings: "lnum", "tnum";
}
.hs-lab {
    font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: var(--cf-ink-faint) !important;
    margin-top: 6px;
    line-height: 1.3 !important;
}

/* Editorial flourish: small terracotta rule before the byline */
.masthead-byline { position: relative; padding-top: 1.4rem; margin-top: 1.4rem; }
.masthead-byline::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 64px; height: 1px;
    background: var(--cf-accent);
}

/* Hero startline — pill it out, more prominent */
.hero-startline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 1.8rem;
    align-items: center;
}
.hero-startline a {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 9px 16px;
    border-radius: 999px;
    transition: background .15s, color .15s, border-color .15s;
}
.hero-startline a.primary {
    background: var(--cf-ink-strongest);
    color: var(--cf-bg);
}
.hero-startline a.primary:hover { background: var(--cf-accent); }
.hero-startline a:not(.primary) {
    color: var(--cf-ink-strong);
    border: 0.5px solid var(--cf-border-card);
    background: var(--cf-surface-raised);
}
.hero-startline a:not(.primary):hover { border-color: var(--cf-accent); color: var(--cf-accent); }
.hero-startline .sep { display: none; }

/* Slim the bezel further so it doesn't compete */
.ni-bezel { padding: 0 16px !important; }
.ni-b-l, .ni-b-mid, .ni-b-r {
    line-height: 22px !important;
    font-size: 9.5px !important;
}

/* ============================================================
   PASS 22 — 2026-05-05 — Velorah-inspired hero polish
   - Instrument Serif-scale headline (massive, tracking-tight)
   - Fade-rise entrance animations on hero block
   - Liquid-glass primary CTA
   - Scoreboard rebalance: hero number primary, denominator subordinate
   - Optional Google Font: Instrument Serif (with EB Garamond fallback)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

/* Instrument Serif when available, EB Garamond as fallback */
.masthead-h1, .page-h1 {
    font-family: 'Instrument Serif', 'EB Garamond', Georgia, serif;
    font-weight: 400;
    letter-spacing: -2.46px;
    line-height: 0.95;
}
.masthead-h1 {
    font-size: clamp(56px, 9.5vw, 128px) !important;
    margin: 0.5rem 0 1rem 0;
}
.page-h1 {
    font-size: clamp(48px, 7vw, 96px) !important;
    letter-spacing: -1.6px;
}

/* Italic break inside the headline (Velorah pattern: "Focus in a Distracted World") */
.h1-soft {
    font-family: 'Instrument Serif', 'EB Garamond', Georgia, serif;
    font-style: italic;
    color: var(--cf-accent);
    font-weight: 400;
}

/* Fade-rise entrance animation */
@keyframes fadeRise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-rise        { animation: fadeRise 0.8s ease-out both; }
.fade-rise-1      { animation: fadeRise 0.8s ease-out 0.15s both; }
.fade-rise-2      { animation: fadeRise 0.8s ease-out 0.30s both; }
.fade-rise-3      { animation: fadeRise 0.8s ease-out 0.45s both; }
.fade-rise-4      { animation: fadeRise 0.8s ease-out 0.60s both; }

.hero .masthead-kicker { animation: fadeRise 0.6s ease-out both; }
.hero .masthead-h1     { animation: fadeRise 0.8s ease-out 0.10s both; }
.hero .masthead-sub    { animation: fadeRise 0.8s ease-out 0.25s both; }
.hero .masthead-byline { animation: fadeRise 0.8s ease-out 0.40s both; }
.hero .hero-stats      { animation: fadeRise 0.8s ease-out 0.55s both; }
.hero .hero-startline  { animation: fadeRise 0.8s ease-out 0.70s both; }

/* Liquid-glass CTA — adapted for cream theme */
.liquid-glass {
    position: relative;
    background: rgba(38, 35, 35, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 0.5px solid rgba(38, 35, 35, 0.12);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.liquid-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg,
        rgba(38, 35, 35, 0.25) 0%,
        rgba(38, 35, 35, 0.08) 20%,
        rgba(38, 35, 35, 0) 50%,
        rgba(38, 35, 35, 0.08) 80%,
        rgba(38, 35, 35, 0.25) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.liquid-glass:hover {
    transform: scale(1.03);
    border-color: var(--cf-accent);
    background: rgba(167, 100, 81, 0.08);
}

/* Apply liquid-glass to the primary "Start reading" CTA */
.hero-startline a.primary {
    background: var(--cf-ink-strongest);
    color: var(--cf-bg);
    padding: 12px 22px !important;
    font-size: 12px !important;
    border-radius: 999px;
    transition: transform .18s ease, background .18s ease;
}
.hero-startline a.primary:hover {
    transform: scale(1.03);
    background: var(--cf-accent);
}
.hero-startline a:not(.primary) {
    composes: liquid-glass;
}
/* (composes is build-tool only; replicate inline) */
.hero-startline a:not(.primary) {
    position: relative;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 0.5px solid rgba(38, 35, 35, 0.12);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
    color: var(--cf-ink-strong);
    padding: 12px 22px !important;
    font-size: 12px !important;
}
.hero-startline a:not(.primary):hover {
    transform: scale(1.03);
    border-color: var(--cf-accent);
    color: var(--cf-accent);
}

/* Scoreboard rebalance — per critique:
   - 39/60 should not optically dominate single digits
   - Treat /60 as small denominator
   - Tabular numbers for alignment
*/
.hs-num { font-feature-settings: "lnum", "tnum"; }
.hs-num .hs-denom {
    font-size: 0.45em;
    color: var(--cf-ink-faint);
    margin-left: 2px;
    vertical-align: 28%;
    letter-spacing: 0;
}

/* Stats column gets tighter to balance lonely single digits */
.hero-stats { gap: 32px; padding: 1.4rem 0; }
.hs-item { padding-right: 8px; border-right: 0.5px solid var(--cf-border-card); }
.hs-item:last-child { border-right: none; padding-right: 0; }

/* Subtle hero background — radial wash from terracotta corner */
.hero {
    position: relative;
    background:
        radial-gradient(ellipse at top right, rgba(167, 100, 81, 0.06), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(187, 244, 81, 0.04), transparent 50%);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(38, 35, 35, 0.025) 40px),
        repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(38, 35, 35, 0.025) 40px);
    pointer-events: none;
    opacity: 0.5;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.hero > * { position: relative; }

/* PASS 22b — bind stats to subhead, demote tertiary CTA */
.hero-stats { margin-top: 1.6rem !important; }
.masthead-byline { margin-bottom: 0; }

/* Tertiary "Email me" → tiny text link, not a pill */
.hero-startline a[href="#signup"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 12px 4px !important;
    color: var(--cf-ink-faint) !important;
    text-decoration: underline;
    text-decoration-color: rgba(38, 35, 35, 0.2);
    text-underline-offset: 4px;
}
.hero-startline a[href="#signup"]:hover {
    color: var(--cf-accent) !important;
    text-decoration-color: var(--cf-accent);
    transform: none !important;
}

/* Top utility bar — lower contrast so it doesn't fight the hero */
.ni-bezel { opacity: 0.85; }
.ni-bezel:hover { opacity: 1; transition: opacity .15s; }

/* ============================================================
   PASS 23 — 2026-05-05 — Pixel-art hero background (cofounder.co inspiration)
   Place the pixel-art illustration as a subtle wash behind the hero text,
   masked to fade into the cream so type stays legible.
   ============================================================ */

.hero--intentional { position: relative; overflow: hidden; }
.pixel-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Vignette + cream fade at top/bottom so text stays legible */
    mask-image: linear-gradient(180deg,
        transparent 0%,
        rgba(0,0,0,0.55) 28%,
        rgba(0,0,0,0.85) 50%,
        rgba(0,0,0,0.55) 72%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(180deg,
        transparent 0%,
        rgba(0,0,0,0.55) 28%,
        rgba(0,0,0,0.85) 50%,
        rgba(0,0,0,0.55) 72%,
        transparent 100%);
    opacity: 0.42;       /* keep it as a wash, not a hero billboard */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.pixel-hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 60%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
/* Hero text needs to sit on top */
.hero--intentional .essay { position: relative; z-index: 2; }

/* Slow ken-burns drift on the pixel art so it feels alive without being noisy */
@keyframes kenBurns {
    0%   { transform: scale(1.04) translate(0, 0); }
    50%  { transform: scale(1.08) translate(-1.5%, -1%); }
    100% { transform: scale(1.04) translate(0, 0); }
}
.pixel-hero-bg img { animation: kenBurns 32s ease-in-out infinite; }

/* On wider screens, push the art a bit so it isn't directly under the text column */
@media (min-width: 1100px) {
    .pixel-hero-bg {
        opacity: 0.56;
        mask-image: linear-gradient(110deg,
            transparent 0%,
            rgba(0,0,0,0.15) 25%,
            rgba(0,0,0,0.85) 60%,
            rgba(0,0,0,0.85) 100%);
        -webkit-mask-image: linear-gradient(110deg,
            transparent 0%,
            rgba(0,0,0,0.15) 25%,
            rgba(0,0,0,0.85) 60%,
            rgba(0,0,0,0.85) 100%);
    }
}

/* PASS 23b — cream scrim behind hero text so it floats above the pixel art */
.hero--intentional .essay {
    background: linear-gradient(110deg,
        rgba(245, 245, 242, 0.92) 0%,
        rgba(245, 245, 242, 0.88) 55%,
        rgba(245, 245, 242, 0.78) 80%,
        rgba(245, 245, 242, 0.55) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px);
    border-radius: 6px;
    border: 0.5px solid rgba(38, 35, 35, 0.06);
    margin-left: 0;
    max-width: 760px;
}
@media (max-width: 760px) {
    .hero--intentional .essay { background: rgba(245,245,242,0.94); }
}

/* PASS 23c — boost scrim contrast + CTA spacing */
.hero--intentional .essay {
    background: linear-gradient(110deg,
        rgba(245, 245, 242, 0.97) 0%,
        rgba(245, 245, 242, 0.95) 70%,
        rgba(245, 245, 242, 0.85) 90%,
        rgba(245, 245, 242, 0.65) 100%) !important;
    box-shadow: 0 1px 0 rgba(38,35,35,0.04), 0 8px 40px rgba(38,35,35,0.06);
}
.hero-startline { gap: 16px !important; margin-top: 2.2rem !important; }
.pixel-hero-bg img {
    object-position: 75% 60%;     /* pull art further to the right so it's a peek */
}
@media (min-width: 1100px) {
    .pixel-hero-bg {
        opacity: 0.6 !important;
        mask-image: linear-gradient(110deg,
            transparent 0%,
            transparent 35%,
            rgba(0,0,0,0.5) 55%,
            rgba(0,0,0,0.95) 80%,
            rgba(0,0,0,0.95) 100%) !important;
        -webkit-mask-image: linear-gradient(110deg,
            transparent 0%,
            transparent 35%,
            rgba(0,0,0,0.5) 55%,
            rgba(0,0,0,0.95) 80%,
            rgba(0,0,0,0.95) 100%) !important;
    }
}

/* PASS 23d — feather scrim edge + bigger stat labels */
.hero--intentional .essay {
    box-shadow:
        0 1px 0 rgba(38,35,35,0.04),
        0 8px 40px rgba(38,35,35,0.06),
        inset -32px 0 32px -32px rgba(245, 245, 242, 0.85);
}
.hs-lab { font-size: 11px !important; }
.hs-num { font-size: clamp(56px, 6.4vw, 88px) !important; }
.masthead-sub {
    font-size: clamp(20px, 2.2vw, 28px) !important;
    line-height: 1.3 !important;
    color: var(--cf-ink-strong) !important;
    margin: 0.8rem 0 1.2rem 0 !important;
}

/* PASS 24 — enforce uniform 16:9 on the homepage evidence panel */
.evidence-grid--2col .ev-card .clip,
.evidence-grid--2col .ev-card .clip[data-aspect],
.evidence-grid--2col .ev-card .clip[data-aspect="9:16"],
.evidence-grid--2col .ev-card .clip[data-aspect="3:4"],
.evidence-grid--2col .ev-card .clip[data-aspect="1:1"],
.evidence-grid--2col .ev-card .clip[data-aspect="4:3"],
.evidence-grid--2col .ev-card .clip[data-aspect="21:9"] {
    aspect-ratio: 16 / 9 !important;
    max-width: none !important;
    margin-inline: 0 !important;
}
.evidence-grid--2col .ev-card .clip video,
.evidence-grid--2col .ev-card .clip .placeholder {
    object-fit: cover !important;
}

/* PASS 25 — tighten hero so evidence panel is visible above fold */
.hero { padding-top: clamp(36px, 4vw, 64px) !important; padding-bottom: clamp(28px, 4vw, 56px) !important; }
.hero-stats { margin-top: 1.4rem !important; padding: 1.2rem 0 !important; }
.hero-startline { margin-top: 1.4rem !important; }
.evidence-strip { padding-top: clamp(28px, 4vw, 56px) !important; padding-bottom: clamp(40px, 5vw, 72px) !important; }


/* ============================================================
   PASS 26 — 2026-05-05 — Evidence panel: clean editorial header
   over a 3×2 grid, centred. Replaces the awkward side-by-side.
============================================================ */
.evidence-strip { padding-top: 56px; padding-bottom: 64px; }
.evidence-head {
    max-width: 760px;
    margin: 0 0 28px;
    text-align: left;
}
.evidence-head .section-h3 {
    font-family: 'Instrument Serif', 'EB Garamond', serif;
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--cf-ink-strong, #1a1614);
    margin: 0 0 10px;
}
.evidence-head .evidence-sub {
    font-family: 'EB Garamond', 'Instrument Serif', serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--cf-ink-faint, #5b5552);
    margin: 0;
    font-style: italic;
}
.evidence-grid--2col {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1240px;
    margin: 0 auto;
}
@media (max-width: 980px) { .evidence-grid--2col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .evidence-grid--2col { grid-template-columns: 1fr; } }

/* Tighten gap between hero and evidence panel so 'start reading' actually lands the user on the hook */
.hero--intentional + .evidence-strip { padding-top: 32px; }

/* HOOK section heading rhythm — give the opening question some breathing room above */
.hook-section { padding-top: 88px; }
.hook-section > .essay > p:first-of-type {
    margin-top: 24px;
    font-family: 'Instrument Serif', 'EB Garamond', serif;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.42;
    color: var(--cf-ink-strong, #1a1614);
    letter-spacing: -0.005em;
}


/* ============================================================
   PASS 27 — 2026-05-05 — Center hero. Pixel art becomes a soft
   ambient backdrop (full bleed, very low opacity) instead of an
   asymmetric panel. Hero text/stats/CTA live centred on the cream.
============================================================ */
.hero--intentional .essay {
    margin: 0 auto !important;
    max-width: 720px !important;
    text-align: center !important;
    background: linear-gradient(180deg,
        rgba(245,245,242,0.94) 0%,
        rgba(245,245,242,0.94) 100%) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px) !important;
    border-radius: 8px;
    border: 0.5px solid rgba(38,35,35,0.06);
    box-shadow: 0 1px 0 rgba(38,35,35,0.04), 0 8px 40px rgba(38,35,35,0.06);
}
.hero--intentional .essay .masthead-h1,
.hero--intentional .essay .masthead-sub,
.hero--intentional .essay .masthead-byline,
.hero--intentional .essay .masthead-kicker { text-align: center; }

.hero--intentional .hero-stats {
    justify-content: center;
    margin-left: auto !important;
    margin-right: auto !important;
}
.hero--intentional .hero-stats .hs-item { text-align: center; }

.hero--intentional .hero-startline {
    justify-content: center !important;
    text-align: center;
    flex-wrap: wrap;
}

/* Pixel art: full-bleed ambient backdrop, symmetric, very subtle */
@media (min-width: 1100px) {
    .pixel-hero-bg {
        opacity: 0.32 !important;
        mask-image: radial-gradient(ellipse at center,
            rgba(0,0,0,0.85) 0%,
            rgba(0,0,0,0.45) 55%,
            transparent 85%) !important;
        -webkit-mask-image: radial-gradient(ellipse at center,
            rgba(0,0,0,0.85) 0%,
            rgba(0,0,0,0.45) 55%,
            transparent 85%) !important;
    }
    .pixel-hero-bg img { object-position: center center !important; }
}

.hero--intentional { padding-bottom: 24px; }

/* Evidence panel: even tighter to the hero so 'Read the notebook' lands the user on the hook headline */
.hero--intentional + .evidence-strip { padding-top: 24px; padding-bottom: 48px; }

/* ============================================================
   MOBILE ALIGNMENT PASS — 2026-05-05
   Fix horizontal overflow + tap targets at <=720px
   ============================================================ */

@media (max-width: 720px) {
    /* Global guard: nothing horizontally exceeds the viewport */
    html, body { overflow-x: hidden; }

    /* Long URLs / inline literals must wrap */
    a, p, li, dd, figcaption {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Wide tables become horizontally-scrollable cards */
    .field-note-table,
    .ledger-table,
    .cmp,
    table.field-note-table,
    table.ledger-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 11.5px;
    }
    .field-note-table th,
    .field-note-table td,
    .ledger-table th,
    .ledger-table td {
        white-space: nowrap;
        padding: 8px 10px;
    }
    .field-note-table,
    .ledger-table { box-shadow: inset -10px 0 8px -10px rgba(0,0,0,0.15); }

    /* Code blocks: wrap or scroll, never push the page */
    pre, code, .prompt-card pre, .prompt-card code,
    .cmp code, .field-note-table code {
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
        max-width: 100%;
    }
    pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: pre;
    }

    /* Standalone <code> snippets — keep inline */
    p > code, .essay code, .lede code {
        display: inline;
        word-break: break-all;
    }

    /* Images & videos cap to viewport */
    img, video, iframe { max-width: 100%; height: auto; }
    .pixel-hero-bg img { width: 100%; height: auto; max-width: 100%; }

    /* Hero stats: 2x2 grid with tighter labels so nothing spills */
    .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 12px;
        padding: 1rem 0;
    }
    .hs-item { min-width: 0; padding: 6px 4px; }
    .hs-num { font-size: 28px; }
    .hs-lab {
        font-size: 9.5px;
        letter-spacing: 0.06em;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .hs-denom { font-size: 0.7em; }

    /* Hero CTAs: stack vertically, full width, easy to tap */
    .hero-startline {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 1.4rem;
    }
    .hero-startline .sep { display: none; }
    .hero-startline a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 10px 18px;
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
    .hero-startline a.primary {
        background: var(--ink, #111);
        color: var(--paper, #fff);
        border-radius: 999px;
    }

    /* Topbar: brand + nav row */
    .topbar { padding: 8px 12px; }
    .topbar-inner { gap: 8px; }
    .topbar nav {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 10px;
        font-size: 11px;
    }
    .topbar nav a {
        padding: 8px 6px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
    .topbar-brand { padding: 8px 0; min-height: 36px; }

    /* Back-to-top tappable */
    .back-to-top, a.back-to-top {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 10px 14px;
    }

    /* Form inputs: real touch height */
    input[type=text], input[type=email], input[type=url],
    input[type=number], input[type=search], select, textarea {
        min-height: 44px;
        font-size: 16px;
        padding: 10px 12px;
        max-width: 100%;
        box-sizing: border-box;
    }
    input[type=radio], input[type=checkbox] {
        min-width: 20px;
        min-height: 20px;
    }
    label { padding: 6px 0; display: inline-block; }

    /* Library / TOC anchor links: tap room */
    .clip-meta a, .lib-card a, .toc-list a {
        display: inline-block;
        padding: 4px 0;
        min-height: 32px;
    }

    /* Section padding tighter on mobile */
    .essay { padding-left: 18px; padding-right: 18px; }
    .fluid { padding-left: 14px; padding-right: 14px; }

    /* Evidence grid: single column */
    .evidence-grid--2col,
    .evidence-grid { grid-template-columns: 1fr !important; gap: 14px; }

    /* Hero kicker: wrap nicely */
    .masthead-kicker {
        font-size: 11px !important;
        letter-spacing: 0.18em;
        line-height: 1.5;
        padding: 0 8px;
    }
}

/* Extra-narrow phones (<=360) */
@media (max-width: 360px) {
    .hero--intentional .masthead-h1 { font-size: 42px; }
    .hero--intentional .masthead-sub { font-size: 17px; }
    .hs-num { font-size: 24px; }
    .hs-lab { font-size: 9px; }
    .essay { padding-left: 14px; padding-right: 14px; }
    .topbar nav { font-size: 10.5px; gap: 3px 8px; }
}

/* ============================================================
   CHAPTER SCAFFOLD — 2026-05-05
   Per-page hero (chapter badge + title + lede + image)
   + sticky left sidebar TOC with scrollspy
   + chapter-footer next/prev CTA
   ============================================================ */

.chapter-shell {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 56px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 36px 96px 36px;
    align-items: start;
}

/* Sidebar */
.chapter-sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
    font-family: 'Inter', system-ui, sans-serif;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.18) transparent;
}
.chapter-sidebar::-webkit-scrollbar { width: 6px; }
.chapter-sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 3px; }

.chap-side-kicker {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin: 0 0 22px 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ink-12);
}

.chap-side-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.chap-side-list li { margin: 0; }

/* Chapter row (top-level entries) */
.chap-side-list .cs-chap > a,
.chap-side-list a.cs-chap-link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 12px 10px 14px;
    color: var(--ink-50);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.35;
    border-left: 2px solid transparent;
    margin-left: -16px;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.cs-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--ink-35);
    flex-shrink: 0;
    width: 32px;
}
.cs-label { font-weight: 500; }
.chap-side-list .cs-chap > a:hover { color: var(--ink); background: var(--ink-08); }
.chap-side-list .cs-chap > a:hover .cs-num { color: var(--ink-65); }

.chap-side-list .cs-chap-link.is-active {
    color: var(--ink);
    border-left-color: var(--accent);
    background: var(--accent-soft);
}
.chap-side-list .cs-chap-link.is-active .cs-num { color: var(--accent); }

/* Sub-items: visible only under the active chapter; left-rail bullet style */
.chap-side-list .cs-sub a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 12px 7px 14px;
    margin-left: 16px;
    color: var(--ink-65);
    text-decoration: none;
    font-size: 12.5px;
    line-height: 1.4;
    border-left: 2px solid transparent;
    transition: color 0.12s, border-color 0.12s;
}
.chap-side-list .cs-sub a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1.5px solid var(--ink-35);
    background: transparent;
    flex-shrink: 0;
    margin-top: 6px;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.chap-side-list .cs-sub a:hover { color: var(--ink); }
.chap-side-list .cs-sub a:hover::before { border-color: var(--ink-65); }
.chap-side-list .cs-sub a.is-active {
    color: var(--ink);
    font-weight: 500;
    border-left-color: var(--accent);
}
.chap-side-list .cs-sub a.is-active::before {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.15);
}

/* Page hero (chapter intro) */
.chapter-hero {
    padding: 8px 0 40px 0;
    border-bottom: 1px solid var(--ink-12);
    margin-bottom: 48px;
}
.chap-badge {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--ink-20);
    border-radius: 999px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-65);
    background: transparent;
    margin-bottom: 28px;
}
.chapter-hero h1.chap-title {
    font-family: 'EB Garamond', serif;
    font-weight: 500;
    font-size: 60px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 24px 0;
    max-width: 22ch;
}
.chapter-hero .chap-lede {
    font-family: 'EB Garamond', serif;
    font-size: 22px;
    line-height: 1.5;
    color: var(--ink-65);
    margin: 0 0 36px 0;
    max-width: 60ch;
}
.chapter-hero .chap-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin: 0 0 36px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}
.chapter-hero .chap-meta-cta {
    color: var(--accent, #EC4A1F);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: opacity 0.15s ease;
}
.chapter-hero .chap-meta-cta:hover {
    opacity: 0.7;
}
.chap-hero-fig {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--ink-12);
    background: var(--ink-08);
    aspect-ratio: 16 / 9;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 24px 48px -28px rgba(0,0,0,0.18);
}
.chap-hero-fig img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Body content slot — uniform vertical rhythm for whatever sections live in here */
.chapter-body { min-width: 0; }
.chapter-body > section { scroll-margin-top: 90px; }

/* Chapter footer (next chapter CTA) */
.chapter-footer {
    margin: 80px 0 0 0;
    padding-top: 36px;
    border-top: 1px solid var(--ink-12);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.chap-foot-card {
    display: block;
    padding: 22px 26px;
    border: 1px solid var(--ink-12);
    border-radius: 14px;
    background: var(--paper);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.chap-foot-card:hover {
    border-color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 12px 32px -20px rgba(0,0,0,0.22);
}
.chap-foot-card .cf-dir {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin: 0 0 8px 0;
}
.chap-foot-card .cf-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--accent);
    margin-right: 10px;
}
.chap-foot-card .cf-title {
    font-family: 'EB Garamond', serif;
    font-size: 24px;
    line-height: 1.2;
    color: var(--ink);
    font-weight: 500;
}
.chap-foot-card.is-prev { text-align: left; }
.chap-foot-card.is-next { text-align: right; }
.chap-foot-card.is-end {
    grid-column: 1 / -1;
    text-align: center;
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.chap-foot-card.is-end .cf-dir,
.chap-foot-card.is-end .cf-title { color: var(--paper); }

/* Tablet */
@media (max-width: 1024px) {
    .chapter-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding: 18px 24px 80px 24px;
    }
    .chapter-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        margin-bottom: 8px;
    }
    .chap-side-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 0;
        border-top: 1px solid var(--ink-12);
        border-bottom: 1px solid var(--ink-12);
        padding: 8px 0;
    }
    .chap-side-list li {
        flex: 1 1 auto;
    }
    .chap-side-list a {
        padding: 8px 12px;
        margin-left: 0;
        border-left: none;
        border-bottom: 2px solid transparent;
    }
    .chap-side-list a::before { display: none; }
    .chap-side-list a.is-active {
        border-left-color: transparent;
        border-bottom-color: var(--accent);
    }
    .chap-side-kicker {
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
}

/* Mobile */
@media (max-width: 720px) {
    .chapter-shell { padding: 14px 16px 64px 16px; gap: 24px; }
    .chapter-hero { padding: 0 0 28px 0; margin-bottom: 32px; }
    .chapter-hero h1.chap-title { font-size: 40px; max-width: none; }
    .chapter-hero .chap-lede { font-size: 18px; }
    .chap-badge { font-size: 9.5px; padding: 5px 11px; margin-bottom: 18px; }
    .chap-side-list a { font-size: 12px; padding: 8px 10px; }
    .chapter-footer {
        grid-template-columns: 1fr;
        margin-top: 56px;
    }
    .chap-foot-card.is-next, .chap-foot-card.is-prev { text-align: left; }
    .chap-foot-card .cf-title { font-size: 20px; }
}

/* When the chapter hero already states the chapter title, the legacy
   per-page <h1 class="page-h1"> below is redundant — collapse it visually
   but keep it in the DOM for SEO + anchor links. */
.chapter-body .page-h1 { display: none; }

/* Tighten body section dividers so the page reads as one chapter, not many */
.chapter-body section.section { padding-top: 3.5rem; padding-bottom: 1rem; }
.chapter-body section.section + section.section { border-top: 1px dashed var(--ink-12); padding-top: 3rem; }
.chapter-body section.section:first-of-type { padding-top: 0; }

/* Section-id label inside chapters: small, monospace, no big band */
.chapter-body .section-id {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin: 0 0 14px 0;
}
.chapter-body .section-id .num { color: var(--accent); margin-right: 8px; }

/* Tame sidebar long titles — wrap nicely, no clipping */
.chap-side-list .cs-sub a { word-break: normal; overflow-wrap: anywhere; }

/* Single footer card (e.g. landing has only "next") spans full width */
.chapter-footer:has(> .chap-foot-card:only-child) {
    grid-template-columns: 1fr;
}
.chap-foot-card.is-next:only-child {
    text-align: left;
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.chap-foot-card.is-next:only-child .cf-dir,
.chap-foot-card.is-next:only-child .cf-title { color: var(--paper); }
.chap-foot-card.is-next:only-child .cf-num { color: rgba(255,255,255,0.55); }

/* ============================================================
   PASS 23 — 2026-05-05 — Character consistency story chapter.
   ============================================================ */

.story-slate,
.asset-board,
.story-clip-grid,
.failure-grid,
.cost-grid {
    display: grid;
    gap: 18px;
}

.story-slate {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
    align-items: stretch;
    margin: 2rem 0;
}

.story-card,
.story-clip-card,
.asset-placeholder,
.failure-grid .failure {
    border: 1px solid var(--ink-12);
    border-radius: 8px;
    background: var(--paper);
}

.story-card {
    padding: 24px;
}

.story-card--wide h3 {
    margin-top: 0.25rem;
    max-width: 22ch;
    font-size: 34px;
}

.story-tag {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.story-dl {
    display: grid;
    gap: 0;
    margin: 1.5rem 0 0 0;
    border-top: 1px solid var(--ink-12);
}

.story-dl div {
    display: grid;
    grid-template-columns: 16ch minmax(0, 1fr);
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--ink-12);
}

.story-dl dt {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.story-dl dd {
    margin: 0;
    color: var(--ink-80);
    font-size: 16px;
    line-height: 1.55;
}

.consistency-flow .method-step {
    min-height: 100%;
}

.asset-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 2rem 0 0 0;
}

.asset-placeholder {
    margin: 0;
    overflow: hidden;
}

.asset-frame {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--ink-12);
    background:
        linear-gradient(90deg, transparent 31px, var(--ink-08) 32px),
        linear-gradient(transparent 31px, var(--ink-08) 32px),
        #f3f3ef;
    background-size: 32px 32px;
    color: var(--ink-50);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
}

.asset-frame--image {
    min-height: 0;
    padding: 10px;
    background: #f3f3ef;
}

.asset-frame--image img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ink-12);
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.asset-placeholder figcaption {
    padding: 0.8rem 1rem;
}

.story-clip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 2rem;
}

.story-clip-card {
    padding: 14px;
}

.story-clip-card .clip {
    margin: 0 0 1rem 0;
}

.story-clip-card h4 {
    margin-top: 0;
    font-size: 21px;
}

.story-clip-card p,
.story-card p,
.failure-grid .failure p {
    max-width: none;
    font-size: 16px;
    line-height: 1.56;
}

.prompt-stack {
    display: grid;
    gap: 12px;
    max-width: var(--wide);
    margin: 1.5rem 0 2rem 0;
}

.prompt-stack details {
    border: 1px solid var(--ink-12);
    border-radius: 8px;
    background: var(--paper);
}

.prompt-stack summary {
    cursor: pointer;
    padding: 0.9rem 1rem;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.prompt-stack pre {
    margin: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0 0 8px 8px;
}

.failure-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.5rem;
}

.failure-grid .failure {
    padding: 18px;
}

.failure-grid .failure h4 {
    margin-top: 0;
}

.cost-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 2rem 0;
}

.story-score-table td:nth-child(3) {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 980px) {
    .story-slate,
    .asset-board,
    .story-clip-grid,
    .failure-grid,
    .cost-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .story-card,
    .story-clip-card,
    .failure-grid .failure {
        padding: 16px;
    }
    .story-dl div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .asset-frame {
        min-height: 180px;
    }
}

.story-final-section {
    padding-top: 3.15rem;
}

.story-final-showcase {
    padding: clamp(18px, 3vw, 32px);
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--ink-20);
    background: var(--surface);
}

.story-final-copy {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
    gap: 1.25rem 2rem;
    align-items: end;
    margin-bottom: 1.35rem;
}

.story-final-copy .story-tag {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.story-final-copy .page-h1 {
    max-width: 12ch;
    margin-bottom: 0;
}

.story-final-copy .lede {
    max-width: 680px;
    margin-bottom: 0;
}

.story-final-media {
    margin: 0;
}

.story-final-clip {
    margin: 0;
    border-color: var(--ink);
    border-radius: 0;
    background: #111111;
}

.story-final-clip .placeholder {
    min-height: 300px;
    padding: 1.5rem;
    text-align: center;
    overflow-wrap: anywhere;
}

.story-final-media figcaption {
    padding-top: 0.85rem;
}

.edit-note-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 1.2rem;
    border: 1px solid var(--ink-20);
    background: var(--paper);
}

.edit-note-grid div {
    min-width: 0;
    padding: 0.82rem 0.9rem;
    border-right: 1px solid var(--ink-12);
}

.edit-note-grid div:last-child {
    border-right: 0;
}

.edit-note-grid span,
.shot-strip span {
    display: block;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-transform: uppercase;
}

.edit-note-grid b,
.shot-strip b {
    display: block;
    margin-top: 0.18rem;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.shot-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: none;
    margin: 0.8rem 0 0 0;
    padding: 0;
    border: 1px solid var(--ink-12);
    background: var(--bg);
    list-style: none;
}

.shot-strip li {
    min-width: 0;
    margin: 0;
    padding: 0.72rem 0.8rem;
    border-right: 1px dotted var(--ink-20);
}

.shot-strip li:last-child {
    border-right: 0;
}

@media (max-width: 900px) {
    .story-final-copy {
        grid-template-columns: 1fr;
    }

    .story-final-copy .page-h1 {
        max-width: 16ch;
    }

    .edit-note-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .edit-note-grid div:nth-child(2n) {
        border-right: 0;
    }

    .edit-note-grid div:last-child {
        grid-column: 1 / -1;
        border-top: 1px solid var(--ink-12);
    }

    .shot-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .story-final-showcase {
        padding: 16px;
    }

    .story-final-clip .placeholder {
        min-height: 210px;
    }

    .edit-note-grid,
    .shot-strip {
        grid-template-columns: 1fr;
    }

    .edit-note-grid div,
    .edit-note-grid div:nth-child(2n),
    .shot-strip li {
        border-right: 0;
        border-bottom: 1px solid var(--ink-12);
    }

    .edit-note-grid div:last-child,
    .shot-strip li:last-child {
        border-bottom: 0;
    }
}
/* Final overflow guard for the consistency chapter. */
.story-score-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed;
}
.story-score-table th,
.story-score-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Verdict/status ledger readability fix — keep marker out of content flow. */
#status .status-list,
.status-list {
    max-width: min(100%, 920px) !important;
}

#status .status-list li,
.status-list li {
    display: block !important;
    position: relative !important;
    padding: 0.95rem 0 1rem 6.2rem !important;
    min-width: 0 !important;
    font-size: 16px;
    line-height: 1.62;
    overflow-wrap: anywhere;
}

#status .status-list li::before,
.status-list li::before {
    position: absolute !important;
    left: 0 !important;
    top: 1.08rem !important;
    width: 4.8rem !important;
    text-align: left;
}

#status .status-list li b,
.status-list li b {
    font-weight: 700;
}

@media (max-width: 640px) {
    #status .status-list li,
    .status-list li {
        padding-left: 0 !important;
        padding-top: 2.15rem !important;
    }

    #status .status-list li::before,
    .status-list li::before {
        top: 0.72rem !important;
        width: auto !important;
    }
}

/* PASS 24 — 2026-05-05 — OpenGradient final cut + overflow hardening. */
.story-final-copy .story-final-title {
    max-width: 17ch;
    margin: 0;
    font-size: clamp(36px, 5vw, 68px);
    line-height: 1.02;
}

.story-final-showcase,
.story-final-copy,
.story-final-media,
.edit-note-grid,
.shot-strip,
.shot-strip li,
.story-card,
.story-clip-card,
.method-step,
.chapter-body,
.chapter-sidebar,
.chapter-footer,
.chap-foot-card,
.fluid,
.container,
.essay,
.matrix-wrap,
.field-note-table {
    min-width: 0;
    max-width: 100%;
}

p,
li,
dd,
dt,
th,
td,
figcaption,
.cat-line,
.chap-foot-card,
.story-tag,
.story-final-title,
.placeholder {
    overflow-wrap: anywhere;
}

p code,
li code,
td code,
dd code,
figcaption code,
.story-card code,
.cat-line code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

pre,
pre code {
    max-width: 100%;
}

.chapter-body code,
.chapter-body pre code,
.clip-detail code,
.prompt-block code,
.method-card code {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word;
}

.chapter-body .matrix-wrap,
.chapter-body .table-wrap {
    max-width: 100%;
    overflow-x: hidden;
}

.chapter-body .field-note-table,
.chapter-body table.field-note-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
}

.chapter-body .field-note-table th,
.chapter-body .field-note-table td {
    min-width: 0 !important;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ni-bezel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    height: 22px !important;
    overflow: hidden;
}

.ni-bezel > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ni-bezel .ni-b-mid { justify-self: center; }
.ni-bezel .ni-b-r { justify-self: end; }

body { padding-top: 22px; }
.topbar { top: 22px !important; }
.progress { top: 86px; }

.topbar-inner,
.topbar-brand,
.topbar nav,
.topbar nav a,
.brand-text {
    min-width: 0;
}

.topbar-inner {
    gap: 12px 18px;
}

.topbar-brand {
    flex: 0 1 auto;
    max-width: 100%;
}

.topbar-brand .brand-text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar nav {
    flex: 1 1 auto;
    justify-content: flex-end;
    max-width: 100%;
}

.topbar nav a {
    flex: 0 1 auto;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .topbar-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .topbar nav {
        justify-content: flex-start;
    }

    .progress {
        display: none;
    }
}

@media (max-width: 1080px) {
    .ni-bezel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .ni-bezel .ni-b-l {
        display: none;
    }

    .ni-bezel .ni-b-mid {
        justify-self: start;
    }
}

@media (max-width: 880px) {
    .ni-bezel,
    .ni-reg,
    .ni-rail {
        display: none !important;
    }

    body {
        padding-top: 0;
        padding-bottom: 0;
    }

    .topbar {
        top: 0 !important;
    }
}

@media (max-width: 720px) {
    .story-final-copy .story-final-title {
        max-width: none;
    }

    .topbar-brand .brand-text {
        max-width: calc(100vw - 64px);
    }

    .topbar nav a {
        font-size: 10px;
        letter-spacing: 0.04em;
        padding-inline: 8px;
    }

    .chapter-body .matrix-wrap {
        overflow-x: visible;
    }

    .chapter-body .field-note-table,
    .chapter-body table.field-note-table,
    .chapter-body .ledger-table,
    .chapter-body table.ledger-table {
        display: table;
        width: 100%;
        min-width: 0 !important;
        table-layout: fixed;
        box-shadow: none;
    }

    .chapter-body .field-note-table th,
    .chapter-body .field-note-table td,
    .chapter-body .ledger-table th,
    .chapter-body .ledger-table td {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}