/* uw-words.css — #direction "The part we can only tell you".
   The illustrative stories, told in words ONLY. This section deliberately
   renders ZERO interface imagery — no frames, no mockups, no rows — the
   restraint is the point. Pure editorial typography: a serif-leaning
   interlude set against the site's Geist, hairline rules, two facing
   quotations with small mono labels, and a slow vertical procession of
   single-line moments.

   The raw markup IS the design: this stylesheet makes the no-JS page
   fully composed (all lines equal ink). js/uw-words.js adds only the
   quiet typographic motion by toggling classes on the EXISTING markup:

     .uww-live   on .uww-section — motion states may apply
     .uww-on     on one .uww-roll li — full ink + warm wash (others ~60%)
     .uww-say    on one .uww-voices p — emphasized voice (other softened)

   Reduced motion / forced colors / no-JS: all lines equal, everything
   legible. The honesty lines (header line + .uww-note) are styled as a
   rust-ruled pair and are never dimmed in any state. */

.uww-section {
    /* flat field: cover the page grid so the section reads as a hush */
    background: var(--ua3-paper, #f4f1e9);
    padding-block: clamp(3rem, 5.6vw, 4.75rem);
    --uww-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    --uww-dim: #6c6a63;
    --uww-dim: color-mix(in srgb, var(--ua3-ink, #191917) 62%, var(--ua3-paper, #f4f1e9));
    --uww-dim-soft: #5b5952;
    --uww-dim-soft: color-mix(in srgb, var(--ua3-ink, #191917) 70%, var(--ua3-paper, #f4f1e9));
}

/* ---------- header: the first honesty line ---------- */

.uww-section .ua3-section-head { max-width: 66rem; }

.uww-section .ua3-section-head h2 { max-width: 16ch; text-wrap: balance; }

.uww-section .ua3-section-head > p:last-child {
    max-width: 56ch;
    padding-left: 1.1rem;
    border-left: 2px solid var(--ua3-rust, #a73a1e);
    color: var(--ua3-ink-2, #2b2a26);
    font-size: 1.08rem;
    line-height: 1.6;
}

/* ---------- the inbox story ---------- */

.uww-inbox {
    position: relative;
    max-width: 74rem;
    margin: clamp(2.6rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
    padding-top: clamp(1.5rem, 3vw, 2.2rem);
    border-top: 1px solid var(--ua3-rule-strong, rgba(25, 25, 23, 0.35));
}

.uww-inbox::before {
    content: "TOLD, NOT SHOWN";
    display: block;
    margin-bottom: clamp(1.3rem, 2.6vw, 2rem);
    color: var(--ua3-rust, #a73a1e);
    font-family: var(--ua3-mono, "Geist Mono", Consolas, monospace);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.15em;
}

.uww-inbox h3 {
    max-width: 22ch;
    margin: 0 0 clamp(1.1rem, 2.4vw, 1.7rem);
    font-family: var(--uww-serif);
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.uww-scene {
    max-width: 58ch;
    margin: 0 0 clamp(2rem, 4vw, 2.9rem);
    color: var(--ua3-ink-2, #2b2a26);
    font-family: var(--uww-serif);
    font-size: clamp(1.22rem, 1.9vw, 1.55rem);
    line-height: 1.58;
}

/* ---------- two facing voices ---------- */

.uww-voices {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.4rem, 5vw, 4.5rem);
    row-gap: 1.6rem;
    padding-block: clamp(1.6rem, 3vw, 2.3rem);
    border-top: 1px solid var(--ua3-rule, rgba(25, 25, 23, 0.18));
    border-bottom: 1px solid var(--ua3-rule, rgba(25, 25, 23, 0.18));
    margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}

/* central hairline between the facing quotations */
.uww-voices::before {
    content: "";
    position: absolute;
    top: clamp(1.6rem, 3vw, 2.3rem);
    bottom: clamp(1.6rem, 3vw, 2.3rem);
    left: 50%;
    width: 1px;
    background: var(--ua3-rule, rgba(25, 25, 23, 0.18));
}

.uww-voices p {
    min-width: 0;
    margin: 0;
    color: var(--ua3-ink, #191917);
    transition: color 0.9s ease;
}

.uww-voices p > span {
    display: block;
    margin-bottom: 0.85rem;
    color: var(--ua3-muted, #57534b);
    font-family: var(--ua3-mono, "Geist Mono", Consolas, monospace);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: color 0.9s ease;
}

.uww-voices q {
    font-family: var(--uww-serif);
    font-style: italic;
    font-size: clamp(1.3rem, 2.1vw, 1.7rem);
    line-height: 1.42;
    letter-spacing: -0.005em;
}

/* alternating emphasis (JS-live only; without JS both sit at full ink) */
.uww-section.uww-live .uww-voices p { color: var(--uww-dim-soft); }
.uww-section.uww-live .uww-voices p.uww-say { color: var(--ua3-ink, #191917); }
.uww-section.uww-live .uww-voices p.uww-say > span { color: var(--ua3-rust, #a73a1e); }

/* ---------- closing line ---------- */

.uww-close {
    max-width: 52ch;
    margin: 0;
    color: var(--ua3-ink, #191917);
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    font-weight: 600;
    line-height: 1.55;
}

.uww-close::before {
    content: "";
    display: block;
    width: 2.6rem;
    height: 2px;
    margin-bottom: 1rem;
    background: var(--ua3-rust-bright, #d4512e);
}

/* ---------- the roll: a slow procession of single lines ---------- */

.uww-roll {
    max-width: 74rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: uww-i;
    border-top: 1px solid var(--ua3-rule-strong, rgba(25, 25, 23, 0.35));
}

.uww-roll > li {
    position: relative;
    display: grid;
    grid-template-columns: clamp(2.9rem, 5vw, 4.4rem) minmax(0, 1fr);
    column-gap: clamp(0.9rem, 2vw, 1.5rem);
    align-items: baseline;
    counter-increment: uww-i;
    /* tightened: this is a held breath between two long sections, so the
       eight-line roll must not read as a second essay */
    padding-block: clamp(0.85rem, 1.7vw, 1.2rem);
    border-bottom: 1px solid var(--ua3-rule, rgba(25, 25, 23, 0.18));
    color: var(--ua3-ink, #191917);
    font-family: var(--uww-serif);
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    line-height: 1.42;
    transition: color 0.9s ease;
}

.uww-roll > li::before {
    content: counter(uww-i, decimal-leading-zero);
    color: var(--ua3-muted, #57534b);
    font-family: var(--ua3-mono, "Geist Mono", Consolas, monospace);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    transition: color 0.9s ease;
}

/* warm wash behind the one line at full ink */
.uww-roll > li::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(212, 81, 46, 0.07), rgba(212, 81, 46, 0) 62%);
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
}

/* live drift (JS only): others sit around 60% ink, one at full */
.uww-section.uww-live .uww-roll > li { color: var(--uww-dim); }
.uww-section.uww-live .uww-roll > li.uww-on { color: var(--ua3-ink, #191917); }
.uww-section.uww-live .uww-roll > li.uww-on::before { color: var(--ua3-rust, #a73a1e); }
.uww-section.uww-live .uww-roll > li.uww-on::after { opacity: 1; }

/* ---------- the second honesty line ---------- */

.uww-note {
    max-width: 62ch;
    margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0;
    padding-left: 1.1rem;
    border-left: 2px solid var(--ua3-rust, #a73a1e);
    color: var(--ua3-ink-2, #2b2a26);
    font-family: var(--ua3-mono, "Geist Mono", Consolas, monospace);
    font-size: 0.8125rem;
    line-height: 1.7;
    letter-spacing: 0.02em;
}

/* ==========================================================
   NARROW COMPOSITIONS
   ========================================================== */

@media (max-width: 760px) {
    .uww-voices {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }
    .uww-voices::before { display: none; }
    .uww-voices p + p {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--ua3-rule, rgba(25, 25, 23, 0.18));
    }
}

@media (max-width: 480px) {
    .uww-inbox h3 { font-size: 1.65rem; }
    .uww-scene { font-size: 1.12rem; }
    .uww-voices q { font-size: 1.18rem; }
    .uww-roll > li {
        grid-template-columns: 2.4rem minmax(0, 1fr);
        column-gap: 0.7rem;
        font-size: 1.08rem;
    }
}

/* ==========================================================
   ACCESSIBILITY / FALLBACK MODES
   ========================================================== */

/* Reduced motion: all lines equal, no transitions — JS also drops
   .uww-live, so these rules are belt-and-braces. */
@media (prefers-reduced-motion: reduce) {
    .uww-section *,
    .uww-section *::before,
    .uww-section *::after {
        animation: none !important;
        transition: none !important;
    }
    .uww-section.uww-live .uww-roll > li,
    .uww-section.uww-live .uww-voices p { color: var(--ua3-ink, #191917); }
    .uww-section.uww-live .uww-voices p > span,
    .uww-section.uww-live .uww-roll > li::before { color: var(--ua3-muted, #57534b); }
    .uww-section.uww-live .uww-roll > li::after { opacity: 0; }
}

/* Forced colors: nothing is hidden here — the words ARE the section.
   Neutralize the dimming and the decorative wash; hairlines survive as
   borders. JS gates the clock off. */
@media (forced-colors: active) {
    .uww-section.uww-live .uww-roll > li,
    .uww-section.uww-live .uww-roll > li::before,
    .uww-section.uww-live .uww-voices p,
    .uww-section.uww-live .uww-voices p > span { color: CanvasText; }
    .uww-roll > li::after { display: none; }
    .uww-inbox::before { color: CanvasText; }
    .uww-close::before,
    .uww-voices::before { background: CanvasText; }
}