/* ==========================================================================
   Conversation pages — chat-inflected rendering in the editorial system
   Same paper/ink/vermillion palette and Fraunces/Petrona pairing as the
   home page and essays. Loaded only for `layout: conversation` pages,
   which skip Tufte CSS entirely, so plain element selectors own the page.
   The chat grammar stays: Nick's spoken turns as bubbles on the right,
   Claude's considered turns as open prose against a hairline.
   ========================================================================== */

body {
    --color-paper: #f6f1e6;
    --color-paper-deep: #efe8d9;
    --color-ink: #211d16;
    --color-light-ink: rgba(33, 29, 22, 0.72);
    --color-accent: #99502e;
    --color-hairline: rgba(33, 29, 22, 0.18);
    --font-body: 'Petrona', Georgia, serif;
    --font-display: 'Fraunces', Georgia, serif;

    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    line-height: 1.7;
    color: var(--color-ink);
    background-color: var(--color-paper);
    background-image: radial-gradient(90rem 50rem at 50% -12rem, rgba(255, 253, 244, 0.9) 0%, rgba(255, 253, 244, 0) 65%);
    position: relative;
}

@media (prefers-color-scheme: dark) {
    body {
        --color-paper: #191611;
        --color-paper-deep: #14110d;
        --color-ink: #ece5d6;
        --color-light-ink: rgba(236, 229, 214, 0.72);
        --color-accent: #cf8d5f;
        --color-hairline: rgba(236, 229, 214, 0.2);
        background-image: radial-gradient(90rem 50rem at 50% -12rem, rgba(46, 40, 30, 0.85) 0%, rgba(46, 40, 30, 0) 65%);
    }

    nav.site-nav a.site-nav-home {
        color: #a89f91;
    }

    nav.site-nav a.site-nav-home:hover,
    nav.site-nav a.site-nav-home:focus {
        color: #f0ebe0;
    }
}

/* Paper grain, matching the rest of the site */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
}

.conversation-page {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    margin: 0 auto;
    padding: 6rem 1.5rem 4rem;
}

.conversation-page p {
    font-size: 1rem;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.conversation-header {
    text-align: center;
    margin: 0 0 3.8rem;
}

.conversation-title {
    margin: 0 0 1.2rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.3rem, 6vw, 3.4rem);
    line-height: 1.15;
    color: var(--color-ink);
    text-wrap: balance;
}

.conversation-deck {
    margin: 0 auto 2rem;
    max-width: 30em;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--color-light-ink);
}

.conversation-byline {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    max-width: 22rem;
    margin: 0 auto 2rem;
}

.conversation-byline .rule {
    flex: 1;
    height: 1px;
    background: var(--color-hairline);
}

.conversation-byline .name {
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--color-accent);
}

.context-note {
    margin: 0 auto;
    max-width: 34em;
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-light-ink);
}

/* --------------------------------------------------------------------------
   Foreword — the editor's voice, set apart on deeper paper
   -------------------------------------------------------------------------- */

.foreword {
    background-color: var(--color-paper-deep);
    border-left: 2px solid var(--color-accent);
    padding: 1.7rem 1.9rem;
    margin-bottom: 3rem;
}

.foreword-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.foreword p {
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--color-light-ink);
    margin: 0 0 1rem;
}

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

.conversation-divider {
    text-align: center;
    color: var(--color-accent);
    font-size: 1.1rem;
    letter-spacing: 0.9em;
    text-indent: 0.9em;
    margin: 0 0 3rem;
}

/* --------------------------------------------------------------------------
   Turns
   -------------------------------------------------------------------------- */

.conversation {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.conversation .turn {
    padding: 0;
    margin: 0;
}

.turn-speaker {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-light-ink);
    margin-bottom: 0.5rem;
}

/* Nick: short spoken turns, set as bubbles on the right — the chat grammar */
.turn-nick {
    align-self: flex-end;
    max-width: 85%;
    text-align: right;
}

.turn-nick .turn-body {
    display: inline-block;
    text-align: left;
    background-color: var(--color-paper-deep);
    border: 1px solid var(--color-hairline);
    border-radius: 14px 14px 4px 14px;
    padding: 0.9rem 1.3rem;
}

.turn-nick .turn-body p {
    margin: 0 0 0.8rem;
}

.turn-nick .turn-body p:last-child {
    margin-bottom: 0;
}

/* Claude: long considered turns, set as open prose against a hairline */
.turn-claude {
    align-self: flex-start;
    max-width: 100%;
    padding-left: 1.4rem;
    border-left: 1px solid var(--color-hairline);
}

.turn-claude .turn-speaker::before {
    content: "\2733\00a0\00a0";  /* ✳ */
    letter-spacing: 0;
    color: var(--color-accent);
}

.turn-claude .turn-body p {
    margin: 0 0 1rem;
    font-size: 1.02rem;
    line-height: 1.8;
}

.turn-claude .turn-body p:last-child {
    margin-bottom: 0;
}

/* ---- Thinking indicator ---- */

.thinking-indicator {
    display: none;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-light-ink);
    padding: 0.3rem 0;
}

.thinking-indicator em {
    font-size: 0.9rem;
    margin-left: 0.4rem;
}

.thinking-indicator .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-light-ink);
    animation: thinking-pulse 1.1s ease-in-out infinite;
}

.thinking-indicator .dot:nth-child(2) { animation-delay: 0.18s; }
.thinking-indicator .dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes thinking-pulse {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}

/* ---- Progressive reveal (only when the script opts in) ---- */

.conv-animated .turn {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.conv-animated .turn.thinking,
.conv-animated .turn.revealed {
    opacity: 1;
    transform: none;
}

.conv-animated .turn.thinking .thinking-indicator {
    display: flex;
}

/* Reserve the reply's space during the beat so nothing below shifts —
   otherwise the collapse would pull later turns up across the reading line */
.conv-animated .turn.thinking .turn-body {
    visibility: hidden;
}

/* The reply arrives rather than snapping in */
.conv-animated .turn-claude.revealed .turn-body {
    animation: turn-body-in 0.6s ease both;
}

@keyframes turn-body-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Colophon
   -------------------------------------------------------------------------- */

.conversation-colophon {
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.conversation-ornament {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: min(100%, 16rem);
    margin-bottom: 1.4rem;
    color: var(--color-accent);
}

.conversation-ornament .rule {
    flex: 1;
    height: 1px;
    background: var(--color-hairline);
}

.conversation-ornament .mark {
    font-size: 0.7rem;
    line-height: 1;
}

.conversation-colophon p {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--color-light-ink);
}

/* ---- Small screens ---- */

@media (max-width: 600px) {
    .conversation-page {
        padding-top: 5rem;
    }

    .conversation-header {
        margin-bottom: 3rem;
    }

    .foreword {
        padding: 1.4rem 1.3rem;
    }

    .turn-nick {
        max-width: 95%;
    }

    .turn-claude {
        padding-left: 1rem;
    }
}