/* Prose essay presentation for Being essays (e.g. being-of-unbeing).
 * Uses the site's ink palette and adapts cleanly to both light and dark modes.
 */
.uob-essay {
    --uob-crimson: #9e3e3e;
    --uob-indigo: #435d7a;
    --uob-amber: #9a6528;
    --uob-sage: #426e58;
    --uob-plum: #704b78;
    --uob-muted: #75756e;
    --uob-surface: rgba(60, 60, 50, 0.032);
    --uob-surface-warm: rgba(154, 101, 40, 0.045);
    --uob-surface-crimson: rgba(158, 62, 62, 0.048);
    --uob-surface-indigo: rgba(67, 93, 122, 0.045);
    --uob-surface-sage: rgba(66, 110, 88, 0.045);
    --uob-border: rgba(60, 60, 50, 0.14);
}

@media (prefers-color-scheme: dark) {
    .uob-essay {
        --uob-crimson: #df8585;
        --uob-indigo: #94b4d8;
        --uob-amber: #dfb074;
        --uob-sage: #87bfa2;
        --uob-plum: #bfa0c9;
        --uob-muted: #a6a59c;
        --uob-surface: rgba(220, 220, 200, 0.045);
        --uob-surface-warm: rgba(223, 176, 116, 0.065);
        --uob-surface-crimson: rgba(223, 133, 133, 0.07);
        --uob-surface-indigo: rgba(148, 180, 216, 0.065);
        --uob-surface-sage: rgba(135, 191, 162, 0.065);
        --uob-border: rgba(220, 220, 200, 0.16);
    }
}

.uob-crimson { color: var(--uob-crimson); font-weight: 700; }
.uob-indigo { color: var(--uob-indigo); font-weight: 700; }
.uob-amber { color: var(--uob-amber); font-weight: 700; }
.uob-sage { color: var(--uob-sage); font-weight: 700; }
.uob-plum { color: var(--uob-plum); font-weight: 700; }
.uob-muted { color: var(--uob-muted); }

.uob-underline-crimson {
    color: var(--uob-crimson);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--uob-crimson) 45%, transparent);
    text-underline-offset: 0.24em;
    text-decoration-thickness: 1.5px;
}

.uob-underline-amber {
    color: var(--uob-amber);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--uob-amber) 45%, transparent);
    text-underline-offset: 0.24em;
    text-decoration-thickness: 1.5px;
}

.uob-epigraph {
    position: relative;
    margin: 0.85em 0 1.6em 0;
    padding: 0.9em 1.3em;
    border-left: 3px solid var(--uob-crimson);
    border-radius: 0 5px 5px 0;
    background: linear-gradient(90deg, var(--uob-surface-crimson), transparent 94%);
    font-family: "LXGW WenKai TC", var(--text-font-family);
    font-size: 1.05em;
    line-height: 1.78;
    letter-spacing: 0.02em;
}

.uob-epigraph > p {
    margin: 0;
}

.uob-voice-quote {
    margin: 0.75em 0 1.35em 0.6em;
    padding: 0.6em 1.05em;
    border-left: 2.5px solid var(--uob-muted);
    border-radius: 0 4px 4px 0;
    background: var(--uob-surface);
    color: var(--uob-muted);
    font-family: "LXGW WenKai TC", var(--text-font-family);
    font-size: 0.94em;
    line-height: 1.72;
}

.uob-voice-quote > p {
    margin: 0;
}

.uob-pivot {
    position: relative;
    margin: 1.5em 0;
    padding: 0.78em 1.15em;
    border-top: 1px solid var(--uob-border);
    border-bottom: 1px solid var(--uob-border);
    background: var(--uob-surface);
    font-family: "LXGW WenKai TC", var(--text-font-family);
    font-size: 0.98em;
    line-height: 1.82;
    text-align: center;
}

.uob-pivot > p {
    margin: 0;
}

.uob-lead-in {
    margin: 1.35em 0 1em 0;
}

.uob-lead-in > p {
    margin: 0;
}

.uob-pillar {
    margin: 1.1em 0 1.35em 0;
    padding: 0.95em 1.2em 0.95em 1.25em;
    border-left: 3px solid var(--pillar-accent, var(--uob-indigo));
    border-radius: 0 6px 6px 0;
    background: var(--pillar-bg, var(--uob-surface-indigo));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pillar-accent, var(--uob-indigo)) 14%, transparent);
    line-height: 1.86;
}

.uob-pillar > p:last-child {
    margin-bottom: 0;
}

.uob-pillar-1 {
    --pillar-accent: var(--uob-indigo);
    --pillar-bg: var(--uob-surface-indigo);
}

.uob-pillar-2 {
    --pillar-accent: var(--uob-amber);
    --pillar-bg: var(--uob-surface-warm);
}

.uob-maxim-crimson,
.uob-maxim-indigo,
.uob-maxim-amber {
    display: inline;
    padding: 0.06em 0.36em;
    border-radius: 3px;
    font-weight: 700;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.uob-maxim-crimson {
    color: var(--uob-crimson);
    background: var(--uob-surface-crimson);
    border-bottom: 1.5px solid color-mix(in srgb, var(--uob-crimson) 48%, transparent);
}

.uob-maxim-indigo {
    color: var(--uob-indigo);
    background: color-mix(in srgb, var(--uob-indigo) 10%, transparent);
    border-bottom: 1.5px solid color-mix(in srgb, var(--uob-indigo) 48%, transparent);
}

.uob-maxim-amber {
    color: var(--uob-amber);
    background: color-mix(in srgb, var(--uob-amber) 10%, transparent);
    border-bottom: 1.5px solid color-mix(in srgb, var(--uob-amber) 48%, transparent);
}

.uob-synthesis {
    margin: 1.55em 0 1.4em 0;
    padding: 0.15em 0 0.15em 1.05em;
    border-left: 2.5px solid var(--uob-sage);
}

.uob-synthesis > p:last-child {
    margin-bottom: 0;
}

.uob-coda {
    margin: 1.85em 0 0.5em 0;
    padding: 0.9em 1em;
    border-top: 1px solid var(--uob-border);
    border-bottom: 1px solid var(--uob-border);
    text-align: center;
    font-family: "LXGW WenKai TC", var(--text-font-family);
    font-size: 1.05em;
    font-weight: 600;
    color: var(--uob-plum);
    letter-spacing: 0.03em;
}

.uob-coda > p {
    margin: 0;
}

@media (max-width: 600px) {
    .uob-epigraph { padding: 0.8em 1em; }
    .uob-pillar { padding: 0.8em 0.95em; }
    .uob-pivot { padding: 0.65em 0.8em; text-align: left; }
}