/* PROTOTYPE: scroll-driven experiential landing (first act).
 * Brand: SIC paper + ink + architectural drawing marks (dotted/dashed
 * lines on paper), gold expertise rail. Tokens mirror default.hbs. */

@font-face {
    font-family: 'Avenue X';
    src: url('../fonts/Avenue X.otf') format('opentype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Avenue Mono';
    src: url('../fonts/Avenue Mono.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Source Serif 4';
    src: url('../fonts/SourceSerif4-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Source Serif 4';
    src: url('../fonts/SourceSerif4-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 200 900; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Source Code Pro';
    src: url('../fonts/SourceCodePro-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/SourceSans3-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 900; font-style: normal; font-display: swap;
}

:root {
    --landing-max: 960px;
    --landing-gutter: 56px;
    --font1: 'Avenue X';
    --font1-mono: 'Avenue Mono', ui-monospace, monospace;
    --font2: 'Source Serif 4';
    --font-ui: 'Source Sans 3', system-ui, sans-serif;
    --font-code: 'Source Code Pro', ui-monospace, monospace;
    --sic-red: #D64545;
    --sic-gold: #CDA349;
    --sic-paper: #F5F4F2;
    --sic-stone: #6E6E6B;
    --sic-ink: #1B1B1B;
    --room: #FFFFFF;
    --border: rgba(27,27,27,0.12);
    --rule: rgba(27,27,27,0.18);
    --mark: rgba(27,27,27,0.22);
    --gold-tint: rgba(205,163,73,0.05);
}

html { background: var(--room); } /* overscroll region matches the room */
.ls-body {
    margin: 0;
    background: var(--room);
    color: var(--sic-ink);
    font-family: var(--font2), Georgia, serif;
    text-wrap: pretty;
}
/* clip, not hidden: overflow-x hidden makes body a scroll container and
   silently kills position:sticky for every descendant. Desktop only —
   body overflow propagates to the VIEWPORT, and a clipped viewport sends
   iOS Chrome's frame accounting haywire (innerHeight collapsed to 92px,
   leaving ~a page of phantom scroll range past the finale). Mobile has
   zero horizontal overflow, so it doesn't need the clip at all. */
@media (min-width: 1000px) {
    .ls-body { overflow-x: clip; }
}

/* publication masthead (.ls-brand) now lives in chrome.css — the single
   source of truth shared with every default-layout page. */

/* V5 THE CONVERSATION DOOR (r5.5 rev 11): ink on white — the hero is the
   first message. aswritten speaks in a display-scale LEFT bracket (3px
   stroke, 22px ticks); the mesh is the .ls-seam on the fixed stage, never
   a wall the type hangs on. */
#ls-door {
    position: relative; z-index: 70;
    background: transparent;
    /* the bottom of the hero bracket sits AT the viewport midpoint: the
       door is a 50vh flex column and the hero rides its bottom edge */
    min-height: 50vh;
    display: flex; flex-direction: column;
    box-sizing: border-box;
}
.ls-door-nav {
    display: flex; justify-content: flex-end; gap: 22px;
    font-family: var(--font1-mono); font-size: 12.5px;
    max-width: var(--landing-max);
    margin: 0 auto;
    padding: 22px var(--landing-gutter);
}
.ls-door-nav a { color: var(--sic-ink); text-decoration: none; opacity: 0.85; }
.ls-door-nav a:hover { opacity: 1; }
.ls-door-hero {
    position: relative;
    width: 100%;
    max-width: var(--landing-max);
    margin: auto auto 0;
    padding: 8px var(--landing-gutter) 8px calc(var(--landing-gutter) + 30px);
    box-sizing: border-box;
}
/* the display bracket: 3px stroke + 22px ticks, at the column edge */
.ls-door-hero::before {
    content: ''; position: absolute;
    left: var(--landing-gutter); top: 0; bottom: 0;
    border-left: 3px solid var(--sic-ink);
}
.ls-door-hero::after {
    content: ''; position: absolute;
    left: var(--landing-gutter); top: 0; width: 22px; height: 0;
    border-top: 3px solid var(--sic-ink);
}
.ls-door-hero .ls-door-tick {
    position: absolute;
    left: var(--landing-gutter); bottom: 0; width: 22px; height: 0;
    border-top: 3px solid var(--sic-ink);
}
.ls-door-wm {
    display: block; font-family: var(--font1-mono);
    font-size: clamp(40px, 5.6vw, 68px); line-height: 1; color: var(--sic-ink);
}
.ls-door-wm sup { font-size: 0.5em; position: relative; top: -0.62em; }
.ls-door-sub {
    font-family: var(--font2), Georgia, serif; font-weight: 330;
    font-size: clamp(16px, 1.8vw, 20px);
    color: var(--sic-ink); max-width: 36ch; margin: 16px 0 0;
}
.ls-door-hint {
    display: block;
    font-family: var(--font1-mono); font-size: 11px;
    color: var(--sic-stone); margin-top: 14px;
}
/* the mesh-6 seam: viewport's left edge, OUTSIDE the container; spans the
   hero performance (it lives on the fixed stage and lifts with it).
   Mobile is meshless (rev 9 ruling); mid widths would collide with the
   column, so the seam yields there too. */
.ls-seam {
    position: fixed; left: 0; top: 0; bottom: 0;
    /* the band always ends TWO gutters short of the container (r8: more
       breathing room off the hero): it GROWS with the viewport instead
       of floating away from the content */
    width: max(0px, calc((100vw - var(--landing-max)) / 2 - 2 * var(--landing-gutter)));
    height: 100vh;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}
.ls-flat .ls-seam { display: none; }
@media (max-width: 1160px) { .ls-seam { display: none; } }
@media (max-width: 800px) {
    .ls-door-wm { font-size: 38px; }
    .ls-door-nav { padding: 14px 20px; gap: 14px; font-size: 11px; }
    /* r10.7: mobile nav carries the same three as desktop — the
       [V5-M] docs+sign-in trim retired */
    /* r10.1: keep the bottom anchor — a fixed top margin here pinned the
       hero to the top of the door on small screens (the hero rode up) */
    .ls-door-hero { padding: 6px 20px 6px 42px; }
    .ls-door-hero::before { left: 20px; border-left-width: 2.5px; }
    .ls-door-hero::after, .ls-door-hero .ls-door-tick { left: 20px; width: 18px; border-top-width: 2.5px; }
    .ls-door-sub { font-size: 15.5px; }
}
/* masthead hides over the door, returns once the room begins */
.ls-brand { transition: transform 0.3s ease; }
body.ls-at-door .ls-brand { transform: translateY(-100%); }
/* review mode (?flat=1): the flow sections start at top — no door */
.ls-flat #ls-door { display: none; }

#ls-track { height: 780vh; }
/* review mode: ?flat=1 collapses act 1 so the flow sections start at top */
.ls-flat #ls-track { height: 0; }
.ls-flat #ls-stage { display: none; }

#ls-stage { position: fixed; inset: 0; overflow: hidden; }
/* once the stage lifts away (past the track) the fly-in choreography is
   over — unclip so an answer card taller than the viewport stays whole */
#ls-stage.ls-lifted { overflow: visible; }

/* the guide grid retired with the paper ground (task-528 r4: white room) */

/* ---- conversation ---- */
#ls-convo { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#ls-convo .ls-msg, #ls-convo a { pointer-events: auto; }

.ls-msg {
    position: absolute;
    max-width: 34rem;
    padding: 18px 22px;
    line-height: 1.55;
    font-size: 1.02rem;
    opacity: 0;
    will-change: transform, opacity;
}
/* the ask wears the right-side speech bracket, right-aligned; the reply
   lands beneath it in the theatre grammar (redline r3, 2026-07-22) */
.ls-msg-user {
    background: transparent;
    border: none;
    border-right: 2px solid var(--sic-ink);
    top: 50vh;
    width: 34rem;           /* fixed — typed text wraps, box never grows */
    box-sizing: border-box;
    padding: 4px 20px 4px 0;
    text-align: right;
    font-size: 18px;        /* .ask-mine .q — serif speech at ask scale */
    overflow-wrap: break-word;
    text-wrap: pretty;      /* no orphaned last words as you type */
    transition: background 0.45s, border-color 0.45s, border-style 0s, color 0.45s;
}
.ls-msg-user::before, .ls-msg-user::after {
    content: ''; position: absolute; right: 0; width: 14px; height: 0;
    border-top: 2px solid var(--sic-ink);
}
.ls-msg-user::before { top: 0; }
.ls-msg-user::after  { bottom: 0; }
/* the act mark rides above the bracket */
.ls-msg-user .ls-kicker { position: absolute; top: -34px; right: 20px; margin: 0; }
.ls-msg-user .ls-msg-body { min-height: 1.6em; }
/* claude-style thinking pulse */
.ls-think-anim { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: baseline; }
.ls-think-anim i {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--sic-stone);
    animation: ls-think 1.2s ease-in-out infinite;
}
.ls-think-anim i:nth-child(2) { animation-delay: 0.18s; }
.ls-think-anim i:nth-child(3) { animation-delay: 0.36s; }
@keyframes ls-think { 0%,100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* parked ghost while the graph builds — the bracket goes not-yet dashed */
.ls-msg-user.ls-ghost {
    background: transparent;
    border-right-style: dashed;
    border-right-color: var(--mark);
    color: var(--sic-stone);
}
.ls-msg-user.ls-ghost::before, .ls-msg-user.ls-ghost::after {
    border-top-style: dashed; border-top-color: var(--mark);
}
/* AI reply — left side, on the paper itself (no bubble) */
.ls-msg-ai {
    background: transparent;
    border: 1px dashed transparent;
    left: 5vw;
    top: 25vh;
    max-width: 40rem;
    overflow: hidden;
    font-size: 0.98rem;
    /* no background in the list: the rAF loop's per-frame class writes kept
       restarting the fade and the paper never landed */
    transition: border-color 0.45s;
}
/* dashed outline while thinking… (response collapsed so the box hugs
   the loading line, not the not-yet-revealed answer) */
.ls-msg-ai.ls-thinking { border-color: var(--mark); }
.ls-msg-ai:not(.ls-answered) #ai-response { display: none; }
.ls-msg-ai.ls-thinking .ls-msg-thinking { margin-bottom: 0; }
/* …paper once it answers: the cited answer is a made thing (r5 idiom —
   paper holds what the system made; elevation retired). It reads as a
   REPLY to the ask: the square elbow hangs from the question above. */
.ls-msg-ai.ls-answered {
    background: var(--sic-paper);
    border: none;
    overflow: visible;
}
.ls-msg-ai.ls-answered::before {
    content: ''; position: absolute;
    right: -36px; top: -6px; width: 26px; height: 30px;
    border-right: 1.5px solid var(--mark);
    border-bottom: 1.5px solid var(--mark);
}
#typed-q { outline: none; cursor: text; caret-color: var(--sic-ink); }
.ls-msg-user.ls-editing { border-right-color: var(--sic-ink); }
/* real caret takes over while editing — hide the fake one */
.ls-msg-user.ls-editing .ls-caret,
.ls-msg-user.ls-asking .ls-caret { display: none; }
.ls-msg-user.ls-asking { border-right-color: var(--sic-ink); }
.ls-msg-user.ls-asking .ls-caret { animation-duration: 0.4s; }
/* send button: fades in once the visitor types; outline -> solid on hover */
.ls-send {
    display: block;
    margin-top: 10px;
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.14em;
    background: transparent;
    border: 1px solid var(--sic-ink);
    color: var(--sic-ink);
    padding: 7px 18px;
    cursor: pointer;
    opacity: 0;             /* appears once the visitor types */
    transition: opacity 0.3s, background 0.15s, color 0.15s;
}
.ls-send.ls-show { opacity: 1; }
.ls-send:hover { background: var(--sic-ink); color: var(--sic-paper); }

.ls-ask-hint {
    font-family: var(--font-code);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--sic-stone);
    margin-top: 8px;
    opacity: 0.75;
}
.ls-caret {
    display: inline-block;
    width: 2px; height: 1.1em;
    background: var(--sic-ink);
    vertical-align: text-bottom;
    margin-left: 2px;
    animation: ls-blink 1s steps(1) infinite;
}
@keyframes ls-blink { 50% { opacity: 0; } }


.ls-msg-thinking {
    font-family: var(--font-code);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--sic-stone);
    margin-bottom: 12px;
}

/* response: dim connective tissue, cited statements in full ink */
#ai-response p { margin: 0 0 0.7em; color: rgba(27,27,27,0.38); }
#ai-response .ls-cited { color: var(--sic-ink); transition: color 0.2s; }
#ai-response sup.ls-fn {
    font-family: var(--font-code);
    font-size: 0.62em;
    color: var(--sic-ink);
    border-bottom: 1px dotted var(--sic-gold);
    cursor: pointer;
    font-weight: 600;
    padding: 0 2px;
}
#ai-response .ls-cited:hover, #ai-response .ls-cited.ls-hot { color: var(--sic-gold); }

/* footnote cards: paper documents; gold appears only on the ACTIVE trace
   (r5: gold is reserved for the citation trace on this page) */
.ls-fnote {
    margin-top: 8px;
    padding: 8px 12px;
    border: 1.5px solid transparent;
    background: var(--sic-paper);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--sic-ink);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s, transform 0.35s;
}
.ls-fnote.ls-on { opacity: 1; transform: none; }
/* cross-highlight when its statement (or the card itself) is hovered —
   the gold border IS the trace */
.ls-fnote.ls-target { border-color: var(--sic-gold); }
/* footnotes stack single-column: the full cite narratives need the
   width (r10.2 — the compact 2-up grid retired with the q/src form) */
.ls-fnotes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
}
.ls-fnote-narr p { margin: 0 0 6px; }
.ls-fnote-narr p:last-child { margin-bottom: 0; }
.ls-fnote-narr code {
    font-family: var(--font-code);
    font-size: 0.92em;
    background: rgba(27,27,27,0.05);
    padding: 0 3px;
}
.ls-fnotes .ls-fnote { margin: 0; width: auto; display: block; }
.ls-fnote strong { font-family: var(--font-code); font-size: 11px; }
.ls-fnote blockquote {
    margin: 4px 0;
    padding: 4px 10px;
    border: 1px dashed var(--mark);
    font-style: italic;
    font-size: 0.74rem;
    color: var(--sic-ink);
}
.ls-fnote .ls-fnote-src {
    display: block;
    margin-top: 5px;
    font-family: var(--font-code);
    font-size: 9px;
    letter-spacing: 0.04em;
    color: var(--sic-stone);
}

/* ---- gutter (full stage, behind conversation) ---- */
#ls-gutter { position: absolute; inset: 0; z-index: 1;     pointer-events: none;
}
#ls-net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#ls-net circle, #ls-net text { pointer-events: auto; }

#ls-cards { position: absolute; inset: 0; pointer-events: none; }
.ls-card {
    position: absolute;
    width: 150px;
    padding: 8px 12px;
    background: #fff;
    border: 1px dashed var(--mark);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--sic-ink);
    will-change: transform, opacity;
    opacity: 0;
}
.ls-card .ls-card-date {
    display: block;
    font-family: var(--font-code);
    font-size: 0.6rem;
    color: var(--sic-stone);   /* r5: dates go stone — gold is the trace */
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}

/* annotation: rides directly under the element it describes */
.ls-gutter-caption {
    position: absolute;
    left: 0; top: 0;
    max-width: 440px;
    text-align: left;
    font-family: var(--font2), Georgia, serif;
    font-weight: 225;
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.2;
    text-wrap: balance;
    color: var(--sic-ink);
    border-top: 1px dashed var(--rule);
    padding-top: 26px;   /* r6: more air between the rule and the beat text */
    opacity: 0;
    will-change: transform, opacity; /* scrub-driven by JS, no CSS transition */
}
.ls-gutter-caption em { font-family: var(--font1-mono); font-size: 0.92em; color: var(--sic-ink); font-style: normal; }

/* network: ink-on-paper drawing marks */
.ls-link { stroke: rgba(27,27,27,0.18); stroke-width: 1; }
.ls-link.ls-hot { stroke: var(--sic-gold); stroke-width: 1.6; }
.ls-node { fill: var(--sic-stone); }
.ls-node.ls-hot { fill: var(--sic-gold); }
.ls-provline { stroke: var(--sic-gold); stroke-width: 1.2; stroke-dasharray: 4 4; fill: none; opacity: 0.9; }

/* ---- acts 2–6: editorial in-flow sections over the fixed stage ---- */
/* pin-and-push: each act sticks below the masthead while the next act
   rises up beneath it, then gets pushed up and out. The section itself
   is the runway (extra bottom padding = how long the act stays pinned). */
.ls-act {
    position: relative;
    z-index: 60;
    /* transparent: the scene choreography keeps acts vertically separate,
       and an opaque background would cover the still-pinned act above */
    background: transparent;
    padding: 0 0 14vh;   /* r5 redline: less dead scroll between acts */
}
.ls-act-inner {
    max-width: var(--landing-max);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 4vh var(--landing-gutter) 4vh;
    background: transparent;
}
/* introspect starts rising as the hero's answer beat lands — no dead viewport */
/* tuned when the canned answer was shorter; +260px keeps the introspect
   question from pinning while the hero answer is still on screen */
#act-gaps { margin-top: 0; }
@media (min-width: 1000px) { #act-gaps { margin-top: calc(-38vh + 260px); } }
.ls-flat #act-gaps { margin-top: 0 !important; }
@media (max-width: 1000px) {
    /* px, not vh: iOS re-evaluates vh as the URL bar animates after each
       scroll, and vh paddings on 8 stacked sections reflow the whole page */
    .ls-act { padding-bottom: 84px; }
    .ls-act-inner { position: static; padding-top: 34px; padding-bottom: 34px; }
    /* mobile runway is set inline by layoutHeroRunway() */
}
/* act mark: typed-bracket mono line above the thread — [02 · connect].
   In-flow (the old absolute gutter kicker retired with r5). */
.ls-kicker {
    font-family: var(--font1-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--sic-ink);
    margin-bottom: 20px;
}
/* the conversation IS the layout: user right, agent left, commentary
   attached to its message (right of agent replies) — flow can't break */
.ls-convo2 { display: flex; flex-direction: column; gap: 22px; }
/* the page is a CONVERSATION: asks right, responses left, brackets on
   the speaker's side, no connectors (redline r5, her final grammar).
   Only .ls-x-thread rows — the gray boxes answering a TYPED ask — are
   threaded replies: right-hung under the ask with the elbow. */
.ls-convo2 .ls-x-ai { display: flex; flex-direction: column; align-items: flex-start; }
.ls-convo2 .ls-x-ai.ls-x-thread { align-items: flex-end; }
/* the annotation is a THREADED REPLY to its message: indented one step
   under it, the elbow reaching up (r6 — "connect once, your calls, etc
   should be threaded replies to those messages") */
.ls-x-side {
    order: 1;
    margin: 16px 0 0 20px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 10px;
    max-width: 40rem;
}
.ls-x-side::before {
    content: ''; grid-column: 1; grid-row: 1;
    width: 26px; height: 30px;
    border-left: 1.5px solid var(--mark);
    border-bottom: 1.5px solid var(--mark);
}
.ls-x-side > * { grid-column: 2; }
/* thread rows (the right-hung papers): the reply mirrors — rmine grammar */
.ls-x-thread .ls-x-side {
    align-self: flex-end;
    margin: 16px 20px 0 0;
    grid-template-columns: minmax(0, 1fr) 26px;
}
.ls-x-thread .ls-x-side::before {
    grid-column: 2;
    border-left: none;
    border-right: 1.5px solid var(--mark);
    justify-self: end;
}
.ls-x-thread .ls-x-side > * { grid-column: 1; text-align: right; }
/* the go-deeper posts: TWO threaded replies to the section's last
   message (r8) — each post wears its OWN elbow on the feed .reply
   metrics (26px arm · 30px drop · 1.5px mark); the strip's single
   shared elbow retired */
.ls-strip-reply {
    margin: 26px 0 0 20px;
    max-width: 42rem;
    padding-left: 36px;   /* the arm gutter: 26px elbow + 10px gap */
    box-sizing: border-box;
}
.ls-strip-reply .ls-artifacts { gap: 16px; }
.ls-strip-reply .ls-artifact { position: relative; }
.ls-strip-reply .ls-artifact::before {
    content: ''; position: absolute;
    left: -36px; top: -6px; width: 26px; height: 30px;
    border-left: 1.5px solid var(--mark);
    border-bottom: 1.5px solid var(--mark);
}
.ls-strip-reply .ls-artifacts-intro { border-top: none; padding-top: 0; }
/* r9: a strip replying to a RIGHT-hung message mirrors right (rmine) —
   the posts hang under the side their parent spoke from */
.ls-strip-rmine {
    margin: 26px 20px 0 auto;
    padding-left: 0;
    padding-right: 36px;
}
.ls-strip-rmine .ls-artifact::before {
    left: auto; right: -36px;
    border-left: none;
    border-right: 1.5px solid var(--mark);
}
/* r9: the gap + white-space graphs ride BESIDE their message (the side-
   commentary grammar) — floated below they read as orphaned */
#act-gaps .ls-x-ai.ls-x-thread { flex-direction: row-reverse; align-items: flex-start; justify-content: flex-start; }
#act-gaps .ls-x-thread .ls-x-side,
#act-whitespace .ls-x-side {
    grid-template-columns: minmax(0, 1fr);
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 330px;
}
#act-gaps .ls-x-thread .ls-x-side { margin: 8px 28px 0 0; align-self: flex-start; }
#act-gaps .ls-x-thread .ls-x-side::before,
#act-whitespace .ls-x-side::before { content: none; }
#act-gaps .ls-x-thread .ls-x-side > *,
#act-whitespace .ls-x-side > * { grid-column: 1; text-align: left; }
#act-whitespace .ls-x-ai { flex-direction: row; align-items: flex-start; }
#act-whitespace .ls-x-side { margin: 8px 0 0 28px; }
.ls-x-thread .ls-x-bubble.ls-x-paper { position: relative; overflow: visible; }
.ls-x-thread .ls-x-bubble.ls-x-paper::before {
    content: ''; position: absolute;
    right: -36px; top: -6px; width: 26px; height: 30px;
    border-right: 1.5px solid var(--mark);
    border-bottom: 1.5px solid var(--mark);
}
.ls-convo2 .ls-x-ai .ls-x-bubble { flex: none; width: fit-content; max-width: 34rem; box-sizing: border-box; }
.ls-convo2 .ls-x-ai .ls-x-bubble.ls-x-widebubble { max-width: 38rem; }
.ls-x-side svg { width: 100%; max-width: 430px; display: block; }
.ls-x-side .ls-annot { margin: 0 0 4px; border-top: none; padding-top: 0; }
.ls-x-side .ls-golinks { margin-top: 14px; }
}
.ls-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.ls-reveal.in-view { opacity: 1; transform: none; }
/* elements above settle upward as a new one rises into place */
.ls-reveal.in-view.ls-settle { transform: translateY(-7px); }

/* chat exchanges (task-528 r4): witnessed speech wears the bracket —
   user closes right, guests open left (blue stroke = their voice);
   the agent's replies are paper documents (system-made) */
.ls-x-user { display: flex; flex-direction: column; align-items: flex-end; }
.ls-x-ai   { display: flex; flex-direction: column; align-items: flex-start; }
.ls-x-bubble {
    --bs: var(--sic-ink);
    position: relative;
    max-width: 34rem;
    background: transparent;
    border: none;
    border-left: 2px solid var(--bs);
    padding: 4px 0 4px 20px;
    line-height: 1.55;
}
.ls-x-bubble::before, .ls-x-bubble::after {
    content: ''; position: absolute; left: 0; width: 14px; height: 0;
    border-top: 2px solid var(--bs);
}
.ls-x-bubble::before { top: 0; }
.ls-x-bubble::after  { bottom: 0; }
.ls-x-user .ls-x-bubble {
    border-left: none;
    border-right: 2px solid var(--bs);
    padding: 4px 20px 4px 0;
    text-align: right;
}
.ls-x-user .ls-x-bubble::before, .ls-x-user .ls-x-bubble::after { left: auto; right: 0; }
/* r5 AI reply identities — three, per the L1 comp:
   default = the [ai] for-you voice: gold OPEN bracket, ink bleeding from
   the one stroke (open brackets keep the fade — r5.2 ruling 25);
   .ls-x-paper = a made thing (paper document, no bracket);
   .ls-x-bare  = unwrapped flow content (lens pairs, quote exchanges). */
.ls-x-ai .ls-x-bubble {
    --bs: var(--sic-gold);
    background: linear-gradient(to right, var(--gold-tint), transparent 70%);
    padding: 4px 0 4px 20px;
}
.ls-x-ai .ls-x-bubble.ls-x-paper {
    --bs: transparent;
    background: var(--sic-paper);
    border-left: none;
    padding: 14px 18px;
}
.ls-x-ai .ls-x-bubble.ls-x-paper::before,
.ls-x-ai .ls-x-bubble.ls-x-paper::after { content: none; }
.ls-x-ai .ls-x-bubble.ls-x-bare {
    --bs: transparent;
    background: transparent;
    border-left: none;
    padding: 0;
}
.ls-x-ai .ls-x-bubble.ls-x-bare::before,
.ls-x-ai .ls-x-bubble.ls-x-bare::after { content: none; }
.ls-x-bubble u { text-decoration-color: var(--sic-ink); text-underline-offset: 3px; }
.ls-x-answer p { margin: 0 0 0.7em; }
.ls-x-answer p:last-child { margin-bottom: 0; }
.ls-x-answer .ls-dim { color: rgba(27,27,27,0.42); }
.ls-x-answer .ls-cited em { font-style: normal; border-bottom: 1px dotted var(--sic-gold); }
/* speaker names: lowercase mono, no chrome — the font hierarchy sets
   speech off (mono name · serif speech · mono meta) */
.ls-x-who {
    font-family: var(--font1-mono);
    font-size: 11.5px;
    color: var(--sic-stone);
    margin-bottom: 5px;
}
/* act notes: quiet mono commentary (the r5 comp's .act-note voice) —
   the big-serif beat voice is reserved for the hero performance */
.ls-act .ls-annot {
    max-width: 34rem;
    font-family: var(--font1-mono);
    font-size: 11px;
    line-height: 1.6;
    color: var(--sic-stone);
    border-top: 1px dashed var(--rule);
    padding-top: 10px;
    margin: 24px 0 8px;
}
.ls-act .ls-annot em {
    font-style: normal;
    color: var(--sic-ink);
}
.ls-annot-sub {
    display: block;
    font-family: var(--font1-mono);
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--sic-stone);
    margin-top: 6px;
}

/* act 2: gap tree */
.ls-gap-viz { display: flex; align-items: flex-end; gap: 34px; margin: 10px 0; }
.ls-gap-viz svg { width: 560px; max-width: 62%; }
.gv-label { font-family: var(--font-code); font-size: 10px; letter-spacing: 0.14em; fill: var(--sic-stone); }
.gv-gap circle, .gv-gap rect { opacity: 0; transition: opacity 0.8s 0.5s; }
.in-view ~ .in-view .gv-gap circle, .ls-gap-viz.in-view .gv-gap circle,
.ls-gap-viz.in-view .gv-gap rect { opacity: 1; }
.gv-gap-edge { stroke-dasharray: 4 4; opacity: 0.4; }

/* act 3: extraction pipeline */
.ls-extract { display: flex; align-items: center; gap: 18px; margin: 8px 0; flex-wrap: wrap; }
.ls-extract-memo { max-width: 250px; display: flex; flex-direction: column; gap: 8px; }
/* memo clauses are witnessed speech: serif, held by a left stroke */
.ls-clause {
    font-family: var(--font2), Georgia, serif;
    font-size: 0.82rem;
    padding: 2px 0 2px 12px;
    border-left: 2px solid var(--sic-ink);
    color: var(--sic-ink);
    background: transparent;
}
.ls-extract-arrow { font-family: var(--font-code); color: var(--sic-stone); font-size: 18px; }
.ls-extract-stmts { display: flex; flex-direction: column; gap: 10px; max-width: 300px; }
/* the extracted statement is a made thing: paper */
.ls-stmt { background: var(--sic-paper); padding: 8px 12px; }
.ls-stmt-txt { display: block; font-size: 0.82rem; line-height: 1.45; }
.ls-vec { display: block; margin-top: 6px; }
.ls-vec i {
    display: inline-block;
    font-style: normal;
    font-family: var(--font-code);
    font-size: 9px;
    letter-spacing: 0.04em;
    color: var(--sic-ink);
    background: rgba(27,27,27,0.05);
    padding: 1px 5px;
    margin: 0 4px 3px 0;
}
/* r9: the theatre-grammar extraction — expressions (witnessed speech,
   the .ls-clause stroke) → position (paper, threaded reply under its
   last member) → narrative (the hub it files under, dashed mint).
   Reply elbows are the grammar; the arrow connector retired. */
.ls-thx { display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.ls-thx-kind {
    display: block;
    font-family: var(--font-code);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--sic-stone);
}
.ls-thx-pos {
    position: relative;
    /* r10: one shared indent — position and narrative sit on the same
       left rail as the expressions; the elbows hang in the arm gutter */
    margin: 12px 0 0;
    background: var(--sic-paper);
    padding: 8px 12px;
}
.ls-thx-pos::before {
    content: ''; position: absolute;
    left: -36px; top: -6px; width: 26px; height: 30px;
    border-left: 1.5px solid var(--mark);
    border-bottom: 1.5px solid var(--mark);
}
.ls-thx-pos .ls-thx-kind { margin-bottom: 4px; }
.ls-thx-narr {
    position: relative;
    margin: 14px 0 0;
    border: 1px dashed var(--mark);
    padding: 6px 10px;
    width: fit-content;
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--sic-ink);
}
.ls-thx-narr::before {
    content: ''; position: absolute;
    left: -36px; top: -6px; width: 26px; height: 30px;
    border-left: 1.5px solid var(--mark);
    border-bottom: 1.5px solid var(--mark);
}
.ls-thx-narr .ls-thx-kind { margin-bottom: 2px; }
.ls-memo-chip {
    display: inline-block;
    margin-bottom: 6px;
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--sic-stone);
    border: 1px dashed var(--mark);
    padding: 4px 12px;
    margin-bottom: 10px;
    width: fit-content;
}
.ls-tx-box, .ls-share-card {
    font-family: var(--font-code);
    font-size: 12px;
    color: var(--sic-ink);
    background: transparent;
}
.ls-tx-box {
    border: 1px solid var(--rule);
    padding: 12px 16px;
    max-width: 250px;
}
/* r9: no inner box around SHARE CREATED — the content sits directly
   in the bracketed message */
.ls-tx-label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--sic-stone);
    margin-bottom: 3px;
}
.ls-tx-dest { display: block; margin-top: 6px; font-size: 10px; color: var(--sic-stone); font-family: var(--font-code); }

/* act 4: PR card — a made thing on paper */
.ls-pr-card {
    padding: 12px 16px;
    margin-bottom: 12px;
    background: var(--sic-paper);
}
.ls-pr-branch, .ls-pr-meta {
    display: block;
    font-family: var(--font-code);
    font-size: 10px;
    color: var(--sic-stone);
    letter-spacing: 0.06em;
}
.ls-pr-card strong { display: block; margin: 4px 0; font-family: var(--font2); }

/* act 4b: optometrist lens pair */
.ls-x-wide { max-width: 44rem; }
.ls-lens-pair { display: flex; gap: 14px; margin: 14px 0; flex-wrap: wrap; }
/* lenses are papers; B is PROJECTED — the dashed paper outline (r5 device:
   not yet witnessed, so its paper wears the not-yet stroke) */
.ls-lens {
    flex: 1 1 240px;
    padding: 12px 14px;
    background: var(--sic-paper);
}
.ls-lens-b {
    outline: 1.5px dashed var(--mark);
    outline-offset: -6px;
}
.ls-lens-tag {
    display: block;
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--sic-ink);
    margin-bottom: 2px;
}
.ls-lens-file {
    display: block;
    font-family: var(--font-code);
    font-size: 9px;
    color: var(--sic-stone);
    margin-bottom: 8px;
}
.ls-lens-copy { font-size: 0.85rem; line-height: 1.5; margin: 0 0 8px; }
.ls-lens-note { font-size: 0.72rem; color: var(--sic-stone); font-style: italic; }
/* square CTA vocabulary (r5): sans, 1.5px border — solid = primary,
   dashed = secondary. No pills, no fills. */
.ls-approve {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 14px;
    border: 1.5px solid rgba(27,27,27,0.55);
    padding: 8px 17px;
    margin-top: 4px;
    color: var(--sic-ink);
    cursor: pointer;
    text-decoration: none;
}
.ls-approve:hover { border-color: var(--sic-ink); }

/* act 5: share */
.ls-share-viz { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ls-share-recipient { border-style: dashed; box-shadow: none; }

/* extraction pipeline in the margin: quotes stacked, flow to the RIGHT */
.ls-extract-vert { flex-direction: row; align-items: center; gap: 12px; flex-wrap: nowrap; }
.ls-extract-vert .ls-extract-memo { flex: 0 0 46%; max-width: none; }
.ls-extract-vert .ls-extract-stmts { flex: 1 1 auto; max-width: none; }
.ls-extract-vert .ls-extract-arrow { transform: none; }
.ls-extract-vert .ls-tx-box { flex: 1 1 100%; margin-top: 10px; max-width: none; }
.ls-arrow-mobile { display: none; } /* mobile-only connector, shown <800px */

/* act 5: share conversation */
.ls-x-bubble code { font-family: var(--font-code); font-size: 0.85em; background: rgba(27,27,27,0.05); padding: 1px 5px; }
.ls-branch-svg { width: 100%; max-width: 420px; margin-top: 12px; display: block; }
.ls-elsewhere { text-align: center; margin: 30px 0 10px; }

/* act 6: phone */
.ls-deploy-viz { display: flex; gap: 44px; align-items: flex-end; flex-wrap: wrap; margin-top: 34px; justify-content: flex-end; }

/* literal wireframe phone — dashed drawing marks on paper */
.ls-wf-phone {
    position: relative;
    width: 280px;
    border: 1.5px dashed var(--sic-stone);
    border-radius: 34px;
    padding: 30px 12px 26px;
    background: transparent;
}
.ls-wf-notch {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    width: 84px; height: 10px;
    border: 1px dashed var(--mark);
}
.ls-wf-homebar {
    position: absolute;
    bottom: 10px; left: 50%;
    transform: translateX(-50%);
    width: 90px; height: 0;
    border-top: 2px solid var(--mark);
}
.ls-wf-screen {
    border: 1px dashed var(--mark);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 300px;
}
.ls-wf-statusbar {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-code);
    font-size: 8px;
    letter-spacing: 0.14em;
    color: var(--sic-stone);
}

/* literal wireframe laptop */
.ls-wf-laptop { flex: 1 1 420px; max-width: 560px; }
.ls-wf-lidscreen {
    border: 1.5px dashed var(--sic-stone);
    border-radius: 12px 12px 0 0;
    padding: 10px;
    background: transparent;
}
.ls-wf-base {
    height: 12px;
    border: 1.5px dashed var(--sic-stone);
    border-top: none;
    border-radius: 0 0 14px 14px;
    margin: 0 -26px;
}

/* slack wireframe inside the lid */
.ls-slackwf { display: flex; border: 1px dashed var(--mark); min-height: 260px; }
.ls-slackwf-rail {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 7px;
    border-right: 1px dashed var(--mark);
}
.ls-slackwf-rail span { width: 18px; height: 18px; border: 1px dashed var(--mark); }
.ls-slackwf-side {
    width: 120px;
    padding: 10px;
    border-right: 1px dashed var(--mark);
    display: flex; flex-direction: column; gap: 8px;
}
.ls-slackwf-ws { font-family: var(--font-ui); font-weight: 700; font-size: 0.72rem; margin-bottom: 4px; }
.ls-slackwf-item { display: block; height: 8px; border-bottom: 1px dashed var(--mark); }
.ls-slackwf-item.is-on {
    height: auto;
    border: none;
    font-family: var(--font-code);
    font-size: 9px;
    color: var(--sic-ink);
    background: rgba(27,27,27,0.05);
    padding: 3px 5px;
}
.ls-slackwf-main { flex: 1; padding: 12px 14px; }
.ls-slack-chan {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.85rem;
    border-bottom: 1px dashed var(--mark);
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.ls-slack-msg { font-family: var(--font-ui); font-size: 0.82rem; line-height: 1.45; margin-bottom: 10px; }
.ls-slack-who { font-weight: 700; margin-right: 6px; }
/* the agent's slack answer wears the for-you gold stroke + fade */
.ls-slack-bot { background: linear-gradient(to right, var(--gold-tint), transparent 70%); border-left: 2px solid var(--sic-gold); padding: 8px 10px; }
.ls-slack-cite { display: block; font-family: var(--font-code); font-size: 9px; color: var(--sic-stone); margin-top: 4px; }

/* admin console */
.ls-admin {
    margin-top: 44px;
    /* right-aligned at user-message width — it's YOUR console */
    width: min(34rem, 100%);
    margin-left: auto;
    box-sizing: border-box;
    border: 1px solid var(--sic-ink);
    background: var(--room);
}
.ls-admin-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--sic-stone);
}
.ls-mode {
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.1em;
    background: transparent;
    border: 1px dashed var(--sic-stone);
    color: var(--sic-stone);
    padding: 4px 12px;
    cursor: pointer;
}
.ls-mode-auto { border-right: none; }
.ls-mode.is-on { background: var(--sic-ink); color: var(--sic-paper); border-color: var(--sic-ink); border-style: solid; }
/* Front-style shared inbox wireframe: list · thread · context */
.ls-front { display: flex; flex-wrap: wrap; }
.ls-front-list {
    flex: 0 0 210px;
    border-right: 1px dashed var(--rule);
}
.ls-front-convo { padding: 10px 12px; border-bottom: 1px dashed var(--rule); }
.ls-front-convo.is-on { background: rgba(27,27,27,0.04); box-shadow: inset 2px 0 0 var(--sic-ink); }
.ls-front-who { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 0.76rem; }
.ls-front-who i {
    font-style: normal;
    font-family: var(--font-code);
    font-size: 8px;
    letter-spacing: 0.14em;
    color: var(--sic-stone);
    border: 1px dashed var(--mark);
    padding: 1px 6px;
    margin-left: 5px;
}
.ls-front-prev { display: block; font-size: 0.74rem; color: var(--sic-stone); margin: 3px 0; }
.ls-front-time { display: block; font-family: var(--font-code); font-size: 8px; letter-spacing: 0.08em; color: var(--sic-stone); }
.ls-front-thread { flex: 1 1 300px; display: flex; flex-direction: column; }
.ls-front-msg { padding: 12px 16px; }
.ls-front-msg p { font-size: 0.85rem; line-height: 1.5; margin: 4px 0 0; }
.ls-front-in { border-bottom: 1px dashed var(--rule); }
.ls-front-out { background: linear-gradient(to right, var(--gold-tint), transparent 82%); border-bottom: 1px dashed var(--rule); }
.ls-front-context {
    flex: 0 0 240px;
    border-left: 1px dashed var(--rule);
    padding: 12px 14px;
    background: rgba(27,27,27,0.02);
}
.ls-front-context p { font-size: 0.78rem; line-height: 1.5; margin: 0 0 8px; }
.ls-admin-src {
    display: block;
    font-family: var(--font-code);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--sic-stone);
    margin-bottom: 6px;
}
.ls-admin-msg p, .ls-admin-reason p { font-size: 0.85rem; line-height: 1.5; margin: 0 0 8px; }
.ls-admin-cite {
    display: block;
    font-family: var(--font-code);
    font-size: 10px;
    color: var(--sic-ink);
    margin: 2px 0;
}
.ls-stepin { display: flex; gap: 8px; padding: 12px 14px; margin-top: auto; border-top: 1px dashed var(--rule); }
.ls-stepin input {
    flex: 1;
    font-family: var(--font2);
    font-size: 0.9rem;
    border: 1px dashed var(--mark);
    background: var(--sic-paper);
    padding: 8px 12px;
    outline: none;
}
.ls-stepin input:focus { border-color: var(--sic-ink); }
.ls-stepin button {
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.12em;
    background: var(--sic-ink);
    color: var(--sic-paper);
    border: none;
    padding: 8px 18px;
    cursor: pointer;
}
.ls-stepin button:hover { background: var(--sic-stone); }
/* a human stepped in: their line is witnessed ink speech, not agent gold */
.ls-sms-human { border-left-color: var(--sic-ink) !important; background: none !important; }
.ls-sms-human::before, .ls-sms-human::after { border-top-color: var(--sic-ink) !important; }
.ls-phone {
    width: 300px;
    border: 1px solid var(--rule);
    border-radius: 26px;   /* device silhouette — a drawing, not an affordance */
    padding: 26px 14px 18px;
    background: var(--room);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* sms exchange wears the bracket grammar: caller = witnessed ink bracket,
   the agent = for-you gold bracket (channel carried in the meta line) */
.ls-sms {
    position: relative;
    font-family: var(--font2), Georgia, serif;
    font-size: 0.85rem; line-height: 1.5;
    padding: 3px 0 3px 14px;
    border-left: 2px solid var(--sic-ink);
    max-width: 85%;
}
.ls-sms::before, .ls-sms::after {
    content: ''; position: absolute; left: 0; width: 10px; height: 0;
    border-top: 2px solid var(--sic-ink);
}
.ls-sms::before { top: 0; }
.ls-sms::after  { bottom: 0; }
.ls-sms-in  { align-self: flex-start; }
.ls-sms-out {
    align-self: flex-end;
    border-left-color: var(--sic-gold);
    background: linear-gradient(to right, var(--gold-tint), transparent 70%);
}
.ls-sms-out::before, .ls-sms-out::after { border-top-color: var(--sic-gold); }
.ls-sms-out sup { color: var(--sic-ink); font-family: var(--font-code); }
.ls-sms-meta { font-family: var(--font-code); font-size: 9px; color: var(--sic-stone); align-self: flex-end; }

@media (max-width: 800px) {
    .ls-gap-viz { flex-direction: column; align-items: flex-start; }
    .ls-gap-viz svg { max-width: 100%; }
    .ls-extract-arrow { transform: rotate(90deg); }
}

/* act 7: white space — small ask, big assembled deliverable */
.ls-ws { margin: 10px 0 30px; }
.ls-ws-doc {
    max-width: 620px;
    background: var(--sic-paper);
    padding: 26px 30px 30px;
}
.ls-ws-doc-title {
    display: block;
    font-family: var(--font1-mono);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 10px;
    margin-bottom: 18px;
}
.ls-ws-block { margin-bottom: 18px; }
.ls-ws-lines { display: block; }
.ls-ws-lines i {
    display: block;
    height: 8px;
    border-bottom: 1px solid rgba(27,27,27,0.2);
    margin-bottom: 5px;
}
.ls-ws-src {
    display: block;
    margin-top: 6px;
    font-size: 0.74rem;
    color: var(--sic-stone);
}
.ls-ws-src b {
    display: inline-block;
    font-weight: 400;
    font-family: var(--font-code);
    font-size: 9px;
    letter-spacing: 0.04em;
    color: var(--sic-ink);
    background: var(--gold-tint);
    border-left: 2px solid var(--sic-gold);
    padding: 1px 6px;
    margin-left: 6px;
}
.ls-ws-tally {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    max-width: 620px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--rule);
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--sic-stone);
}
.ls-ws-tally b { color: var(--sic-ink); }

/* ---- hint / finale ---- */

/* finale lives in the white room (r5) — the mesh returns only at [start] */
#ls-finale {
    position: relative;
    z-index: 60;
    background: var(--room);
    border-top: 1px solid var(--rule);
    min-height: 46vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* left edge on the editorial column, like every act */
    padding: 10vh max(calc((100vw - var(--landing-max)) / 2 + var(--landing-gutter)), 24px);
    box-sizing: border-box;
}
#ls-finale p { max-width: 62ch; }
#ls-finale h2 {
    font-family: var(--font2), Georgia, serif;
    font-weight: 300;
    font-size: clamp(24px, 3vw, 34px);
    margin: 0 0 10px;
}
#ls-finale p { line-height: 1.65; color: var(--sic-stone); font-family: var(--font-ui); font-size: 15px; margin: 0; }
#ls-finale p a { color: var(--sic-ink); }
.ls-cta-big {
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--sic-ink) !important;
    text-decoration: none;
    display: inline-block;
    border: 1.5px solid rgba(27,27,27,0.55);
    padding: 10px 20px;
    transition: border-color 0.15s;
}
.ls-cta-big:hover { border-color: var(--sic-ink); }

/* mobile: single column, tightened geometry */
@media (max-width: 800px) {
    .ls-msg { font-size: 0.92rem; padding: 13px 15px; }
    /* chat polarity: user hugs right and stops short of the left edge,
       AI hugs left — the offset is what reads as a conversation */
    .ls-msg-user {
        right: 4vw !important; left: auto !important;
        width: 80vw; max-width: none; box-sizing: border-box;
    }
    .ls-msg-ai {
        left: 4vw !important; right: auto;
        width: 88vw; max-width: none; box-sizing: border-box;
        font-size: 0.88rem;
    }
    .ls-fnotes { grid-template-columns: 1fr; }
    .ls-convo2 .ls-x-ai, .ls-row-main .ls-x-ai { flex-direction: column; gap: 0; }
    .ls-x-ai .ls-x-bubble, .ls-x-ai .ls-x-bubble.ls-x-widebubble {
        flex: 1 1 auto; width: 90%; align-self: flex-start; box-sizing: border-box;
    }
    .ls-x-thread .ls-x-bubble.ls-x-paper { align-self: flex-end; }
    .ls-x-side, .ls-row-aside { margin-left: 26px; max-width: none; }
    .ls-x-thread .ls-x-side { margin-right: 26px; }
    .ls-x-user .ls-x-bubble, .ls-x-user .ls-x-bubble.ls-x-widebubble {
        width: 84%; align-self: flex-end; box-sizing: border-box;
    }
    .ls-x-side { padding-top: 0; }
    .ls-kicker { position: static; width: auto; margin-bottom: 16px; }
    /* cards: JS lays them out as a horizontal strip and sets the width */
    .ls-card { font-size: 0.68rem; padding: 6px 9px; }
    .ls-card .ls-card-date { font-size: 0.56rem; letter-spacing: 0.04em; }
    /* beat voice at hero size, not sidebar size */
    .ls-gutter-caption { max-width: 82vw; font-size: 26px; }
    #ls-gutter { opacity: 0.6; }
    .ls-act { padding: 50px 0 26px; }  /* px: vh reflows on iOS URL-bar moves */
    /* remember viz: stack memo ↓ statements ↓ sparql vertically, every
       block the same width, the whole stack centered under the AI reply */
    .ls-extract, .ls-extract-vert { flex-direction: column; align-items: stretch; gap: 12px; }
    .ls-x-side .ls-extract, .ls-x-side .ls-tx-box {
        width: 90%; margin-left: auto; margin-right: auto;
    }
    .ls-extract-arrow,
    .ls-extract-vert .ls-extract-arrow { display: block; width: 1em; transform: rotate(90deg); transform-origin: center; margin: 2px auto; }
    .ls-extract-memo, .ls-extract-stmts, .ls-stmt, .ls-clause {
        max-width: 100%; width: 100%; box-sizing: border-box;
    }
    .ls-tx-box { box-sizing: border-box; }
    .ls-arrow-mobile { display: block; margin: 10px auto 0; }
    /* act gutters match the hero: same 4vw edges as the chat messages */
    .ls-act-inner { padding-left: 4vw; padding-right: 4vw; }
    .ls-act .ls-annot { max-width: none; }
    /* act notes stay the quiet mono voice on mobile too */
    /* hero beat reads as part of the AI reply column: narrow enough
       that the question wraps to a second line, never full-bleed */
    .ls-row-aside { position: static; width: auto; margin-top: 20px; }
    .ls-kicker { position: static; width: auto; margin-bottom: 20px; }
    .ls-x-bubble { max-width: none; }
    .ls-lens-pair { flex-direction: column; }
    /* in a column, the 240px flex-basis becomes HEIGHT — content-size them */
    .ls-lens { flex: 0 0 auto; }
    .ls-front-list { flex: 1 1 100%; border-right: none; border-bottom: 1px dashed var(--rule); display: flex; }
    .ls-front-convo { flex: 1; border-bottom: none; }
    .ls-front-context { flex: 1 1 100%; border-left: none; border-top: 1px dashed var(--rule); }
    .ls-wf-laptop { max-width: 100%; }
    .ls-slackwf-side { width: 84px; }
    #ls-finale h2 { font-size: 1.8rem; }
}

/* tag-driven "go deeper" link slots — render nothing while the tag is empty */
.ls-golinks { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.ls-golinks-label {
    font-family: var(--font-code);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--sic-stone);
}
.ls-golinks a {
    font-family: var(--font2), Georgia, serif;
    font-size: 0.9rem;
    color: var(--sic-ink);
    text-decoration: none;
    border-bottom: 1px dashed var(--mark);
}
.ls-golinks a:hover { border-bottom-color: var(--sic-ink); }
.ls-golinks .ls-golinks-more {
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.1em;
    border-bottom: none;
    color: var(--sic-stone);
}

/* [start]: install + human start path — square CTA pair, solid + dashed */
.ls-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 19px; }
.ls-cta-alt {
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--sic-ink) !important;
    text-decoration: none;
    display: inline-block;
    border: 1.5px dashed rgba(27,27,27,0.55);
    padding: 10px 20px;
    transition: border-color 0.15s;
}
.ls-cta-alt:hover { border-color: var(--sic-ink) !important; }

/* the [start] band: the mesh returns as a THIN seam between the
   finale and the threshold out (r9 — the right block retired) */
.ls-mesh-rule {
    position: relative;
    z-index: 60;
    height: 10px;
    background: url(../images/mesh-6.jpg) center / cover no-repeat;
}
#ls-start {
    position: relative;
    z-index: 60;
    background: var(--room);
}
.ls-start-inner { padding: 30px var(--landing-gutter) 38px max(calc((100vw - var(--landing-max)) / 2 + var(--landing-gutter)), 24px); }
.ls-start-inner > * { max-width: var(--landing-max); }
.ls-start-lead {
    font-family: var(--font2), Georgia, serif;
    font-weight: 340;
    font-size: 17px;
    max-width: 46ch;
    margin: 0;
}
@media (max-width: 800px) {
    .ls-start-inner { padding: 26px 20px 30px; }
    .ls-cta-row { flex-direction: column; align-items: stretch; }
    .ls-cta-row .ls-cta-big, .ls-cta-row .ls-cta-alt { text-align: center; box-sizing: border-box; }
}

/* expanded citation entities */
.ls-node.ls-temp { fill: var(--sic-gold); }
.ls-node-label {
    font-family: var(--font-code);
    font-size: 9.5px;
    letter-spacing: 0.04em;
    fill: var(--sic-ink);
}
#ai-response .ls-cited, #ai-response sup.ls-fn { cursor: pointer; }

/* per-act editable prompts */
.ls-x-user .ls-x-bubble[contenteditable] { outline: none; cursor: text; caret-color: var(--sic-ink); }
.ls-x-user .ls-x-bubble[contenteditable]:focus { border-color: var(--sic-ink); }
.ls-send-x { margin-top: 8px; }

/* legacy rows (deploy / white space / custody): flow flex, no absolutes */
/* custody reply reveals in its own row (not inside .ls-convo2), so it
   lacks the 12px question→reply gap the standard sections get; add it,
   plus extra clearance since the pinned question overlaps this row in X */
.ls-row { display: flex; flex-direction: column; gap: 0; align-items: flex-start; margin-top: 30px; }
.ls-row-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ls-row-main .ls-x-ai { display: flex; flex-direction: row; align-items: flex-start; }
.ls-row-aside {
    margin: 16px 0 0 20px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 10px;
    max-width: 40rem;
}
.ls-row-aside::before {
    content: ''; grid-column: 1; grid-row: 1;
    width: 26px; height: 30px;
    border-left: 1.5px solid var(--mark);
    border-bottom: 1.5px solid var(--mark);
}
.ls-row-aside > * { grid-column: 2; }
.ls-row-aside .ls-annot { border-top: none; padding-top: 0; margin: 0 0 4px; }
@media (max-width: 1000px) {
    .ls-row { flex-direction: column; }
    .ls-row-aside { flex: 1 1 auto; }
}

/* user prompts always sit in the right-hand slot, in every act structure */
.ls-convo2 .ls-x-user, .ls-row-main .ls-x-user, .ls-act .ls-x-user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* (r7: the go-deeper strip is its own threaded reply — old anchoring retired) */
.ls-golinks a { display: inline-block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* parked question sheds its chrome — just the words above the timeline */
.ls-msg-user.ls-compact .ls-ask-hint,
.ls-msg-user.ls-compact .ls-send {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    pointer-events: none;
}
.ls-ask-hint, .ls-send { transition: opacity 0.3s, max-height 0.3s, margin 0.3s; max-height: 60px; }




/* ---- mobile pass: act 6 wireframes stack and never exceed the column ---- */
@media (max-width: 800px) {
    .ls-row-main, .ls-deploy-viz, .ls-admin { max-width: 100%; min-width: 0; }
    .ls-deploy-viz { gap: 28px; align-items: flex-start; }
    .ls-wf-phone { width: min(280px, 100%); box-sizing: border-box; }
    .ls-wf-laptop { flex: 1 1 100%; max-width: 100%; }
    .ls-slackwf-main { min-width: 0; }
    .ls-front { flex-direction: column; }
    .ls-front-list {
        flex: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px dashed var(--rule);
        box-sizing: border-box;
    }
    .ls-front-thread, .ls-front-context { width: 100%; box-sizing: border-box; }
    .ls-admin-bar { flex-wrap: wrap; gap: 6px; }
}

/* kicker joins the flow whenever detents are off (<1000px) — the absolute
   -110px gutter position is off-canvas there. Last in file: wins cascade. */
@media (max-width: 1000px) {
    .ls-kicker { position: static; width: auto; margin-bottom: 18px; }
}

/* ---- go-deeper artifact strip: the live landing page's content
   hierarchy, replicated. Full-width at the end of each act. ---- */
.ls-artifacts-wrap { margin-top: 30px; }

/* hero strip: under the question on the hero home screen, right-aligned.
   JS positions it (top/right) and fades it out with the scroll hint. */
/* r8: the hero posts are TWO threaded replies under the ask — each
   wears its own elbow, mirrored right (rmine grammar) */
#hero-artifacts {
    position: absolute;
    width: 34rem;
    margin-top: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    padding-right: 36px;   /* the arm gutter: 26px elbow + 10px gap */
    box-sizing: border-box;
}
#hero-artifacts .ls-artifacts { gap: 16px; }
#hero-artifacts .ls-artifact { padding: 8px 0; position: relative; }
#hero-artifacts .ls-artifact::before {
    content: ''; position: absolute;
    right: -36px; top: -6px; width: 26px; height: 30px;
    border-right: 1.5px solid var(--mark);
    border-bottom: 1.5px solid var(--mark);
}
#hero-artifacts .ls-artifacts-intro { border-top: none; padding-top: 0; }
@media (max-width: 799px) {
    #hero-artifacts { width: 80vw; }
}

.ls-artifacts-intro {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--font-code);
    font-size: 11px; letter-spacing: 0.18em;
    color: var(--sic-stone);
    border-top: 1px dashed var(--rule);
    padding-top: 14px; margin: 0 0 4px;
}
.ls-artifacts-intro .ls-art-more { color: var(--sic-stone); text-decoration: none; letter-spacing: 0.14em; }
.ls-artifacts-intro .ls-art-more:hover { color: var(--sic-ink); }
.ls-artifacts { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.ls-artifact {
    border-top: 1px dashed var(--rule);
    padding: 16px 0 6px;
    display: grid; grid-template-columns: 36px 1fr; gap: 14px;
    align-items: start;
    text-decoration: none; color: inherit;
}
.ls-artifact:hover { border-top-color: var(--sic-ink); }
/* square dashed marker (r5: square affordances — the dashed circle retired) */
.ls-marker { position: relative; width: 28px; height: 28px; margin-top: 2px; border: 1.3px dashed var(--mark); box-sizing: border-box; }
.ls-marker svg { display: none; }
.ls-marker .num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-code); font-size: 10px; font-weight: 500; color: var(--sic-ink);
}
.ls-art-body { font-family: var(--font2), Georgia, serif; padding-top: 2px; }
.ls-ttl { font-size: 16px; font-weight: 500; line-height: 1.35; margin-bottom: 4px; color: var(--sic-ink); }
.ls-artifact:hover .ls-ttl { color: var(--sic-stone); }
.ls-desc { font-size: 13px; color: var(--sic-stone); line-height: 1.45; font-style: italic; }


/* ---------------- mailing-list signup (lives in the [start] band) ---------------- */
.ls-finale-subscribe {
    margin-top: 2.2rem;
    padding-top: 1.2rem;
    border-top: 1px dashed var(--rule);
}
.ls-finale-subscribe p { font-family: var(--font-ui); font-size: 0.9rem; color: var(--sic-stone); margin: 0; }

/* inline signup — dashed-underline input on paper + approve-style pill button */
.ls-sub-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0 0;
    max-width: 26rem;
}
.ls-sub-form input[data-members-email] {
    flex: 1;
    min-width: 0;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--sic-ink);
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--sic-stone);
    border-radius: 0;
    padding: 8px 2px;
    outline: none;
}
.ls-sub-form input[data-members-email]:focus { border-bottom-color: var(--sic-ink); }
.ls-sub-form input::placeholder { color: var(--sic-stone); opacity: 0.7; }
.ls-sub-form button[type="submit"] {
    flex: none;
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--sic-ink);
    background: transparent;
    border: 1px dashed var(--sic-stone);
    padding: 6px 14px;
    cursor: pointer;
}
.ls-sub-form button[type="submit"]:hover { border-color: var(--sic-ink); }
.ls-sub-form .ls-sub-ok { display: none; font-size: 0.9rem; padding: 8px 0; color: var(--sic-ink); }
.ls-sub-form.success input, .ls-sub-form.success button { display: none; }
.ls-sub-form.success .ls-sub-ok { display: block; }
/* error: input + button hold their place; message reveals to the right,
   the button turns red and reads TRY AGAIN */
.ls-sub-form .ls-sub-err {
    position: absolute;
    left: calc(100% + 16px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 0.9rem;
    color: var(--sic-red);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    pointer-events: none;
    transition: clip-path 0.45s ease, opacity 0.2s ease;
}
.ls-sub-form.error .ls-sub-err { clip-path: inset(0 0 0 0); opacity: 1; }
.ls-sub-form.error button[type="submit"] { border-color: var(--sic-red); color: var(--sic-red); font-size: 0; }
.ls-sub-form.error button[type="submit"]::after {
    content: "Try again";
    font-size: 10px; letter-spacing: 0.12em; color: var(--sic-red);
}
.ls-sub-form.error button[type="submit"]:hover { border-color: var(--sic-red); background: transparent; }
.ls-sub-form.loading button[type="submit"] { opacity: 0.5; pointer-events: none; }
/* narrow screens: the message can't fit to the right — drop it below */
@media (max-width: 720px) {
    .ls-sub-form .ls-sub-err {
        position: static; transform: none; clip-path: none; opacity: 1;
        white-space: normal; display: none; flex-basis: 100%; padding-top: 6px;
    }
    .ls-sub-form.error .ls-sub-err { display: block; }
}

/* hero: quiet Subscribe under the reading strip, right-aligned */
.ls-hero-sub {
    display: block;
    margin-left: auto;
    margin-top: 10px;
    background: none;
    border: none;
    padding: 4px 0;
    font-family: var(--font1-mono), ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--sic-stone);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--rule);
    text-underline-offset: 4px;
}
.ls-hero-sub:hover { color: var(--sic-ink); text-decoration-color: var(--sic-ink); }

/* ================= act 2: connect (task-520) ================= */
/* the + panel — the product's connect flow as a literal wireframe */
.ls-connect-viz { align-self: flex-start; }
.ls-cp {
    background: var(--sic-paper);
    max-width: 30rem;
    overflow: hidden;
}
.ls-cp-bar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-code);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--sic-stone);
    border-bottom: 1px solid var(--border);
    padding: 8px 14px;
}
.ls-cp-step { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ls-cp-step:last-of-type { border-bottom: 0; }
.ls-cp-lbl {
    display: block;
    font-family: var(--font-code);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    color: var(--sic-stone);
    margin-bottom: 8px;
}
.ls-cp-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 13.5px; padding: 5px 0; }
.ls-cp-row code { font-family: var(--font-code); font-size: 0.85em; background: rgba(27,27,27,0.05); padding: 1px 5px; }
.ls-cp-auth { margin-left: auto; font-family: var(--font-code); font-size: 10.5px; color: var(--sic-stone); text-align: right; }
.ls-cp-row.is-on .ls-cp-auth { color: var(--sic-ink); }
.ls-cp-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(27,27,27,0.45); flex: none; }
.ls-cp-row.is-on .ls-cp-dot { background: var(--sic-ink); border-color: var(--sic-ink); }
.ls-cp-pick { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-ui); font-size: 13px; padding: 4px 0; color: rgba(27,27,27,0.72); }
.ls-cp-t { font-family: var(--font-code); font-size: 10.5px; color: var(--sic-stone); flex: none; }
.ls-cp-go { margin-left: auto; font-family: var(--font-code); font-size: 10.5px; color: var(--sic-ink); }
.ls-cp-note { font-family: var(--font-ui); font-size: 12px; color: var(--sic-stone); padding: 10px 14px; border-top: 1px solid var(--rule); }

/* the feed cameo rides the reply chain (right channel) */
/* the feed cameo (r5/r5.2): the extracted call is an ABSORBED bracket
   ([[ ]] nesting); the [ai] delta reaction papers as its reply inside a
   gold CLOSED enclosure — V3 drawn strokes, FLAT tint (closed enclosures
   hold flat tints; only open brackets keep the fade). Matches the feed. */
.ls-fd-wrap { align-self: flex-start; max-width: 37rem; }
.ls-fd { background: transparent; padding: 0; }
.ls-fd-call {
    position: relative;
    border-left: 5px double var(--sic-ink);
    padding: 2px 0 2px 25px;
    max-width: 52ch;
}
.ls-fd-call::before, .ls-fd-call::after {
    content: ''; position: absolute; left: 0; width: 15px; height: 0;
    border-top: 5px double var(--sic-ink);
}
.ls-fd-call::before { top: 0; }
.ls-fd-call::after  { bottom: 0; }
.ls-fd-call strong { font-weight: 400; font-family: var(--font1-mono); font-size: 13px; display: block; }
.ls-fd-t { font-family: var(--font-code); font-size: 10.5px; color: var(--sic-stone); }
/* square reply elbow (r5.1 ruling 19: G1 square, radius retired) */
.ls-fd-reply { display: flex; margin-top: 16px; }
.ls-fd-elbow {
    flex: none; width: 26px; height: 30px;
    border-left: 1.5px solid var(--mark);
    border-bottom: 1.5px solid var(--mark);
    margin: 0 10px 0 20px;
}
/* the gold closed enclosure: drawn long-dash strokes both sides */
.ls-fd-delta {
    position: relative;
    width: fit-content;
    max-width: 100%;
    padding: 9px 20px;
    background: var(--gold-tint);   /* FLAT tint — no fade on closed objects */
}
.ls-fd-delta::before, .ls-fd-delta::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 12px;
    background:
        linear-gradient(var(--sic-gold), var(--sic-gold)) 0 0 / 2.5px 100%,
        linear-gradient(var(--sic-gold), var(--sic-gold)) 0 0 / 12px 2.5px,
        linear-gradient(var(--sic-gold), var(--sic-gold)) 0 100% / 12px 2.5px;
    background-repeat: no-repeat;
}
.ls-fd-delta::before { left: 0; }
.ls-fd-delta::after  { right: 0; transform: scaleX(-1); }
.ls-fd-who { display: block; font-family: var(--font1-mono); font-size: 11.5px; color: var(--sic-stone); margin-bottom: 6px; }
.ls-fd-delta p { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.55; margin: 0 0 8px; }
.ls-fd-delta p:last-child { margin-bottom: 0; }
.ls-fd-lin { font-family: var(--font-code); font-size: 10.5px; color: var(--sic-stone); }
.ls-fd-arc { display: inline-block; vertical-align: -2px; margin-right: 6px; width: 64px; }
.ls-fd-arclink { font-family: var(--font-code); font-size: 10.5px; color: var(--sic-ink); }

/* act 9: custody extension — the enterprise exchange (task-520) */
.ls-custody-ext { margin-top: 34px; }
/* the quote is an INSET within its bracketed message (r6) */
.ls-quotecard {
    border-left: 1.5px solid var(--rule);
    padding: 2px 0 2px 16px;
    margin: 12px 0 12px 20px;
}
.ls-quotecard blockquote { margin: 0 0 6px; font-style: italic; }
.ls-quote-src { font-family: var(--font-code); font-size: 10.5px; color: var(--sic-stone); }

@media (max-width: 1000px) {
    .ls-connect-viz { margin-left: 0; align-self: stretch; }
    .ls-fd-wrap { align-self: stretch; }
}
/* narrow screens: nothing may set the column wider than the viewport —
   a fixed-width child (the 30rem connect panel) pushes every sibling
   past the right edge otherwise */
@media (max-width: 800px) {
    .ls-cp, .ls-fd, .ls-fd-wrap, .ls-fd-delta,
    .ls-connect-viz, .ls-admin, .ls-slackwf,
    .ls-x-bubble, .ls-convo2 { max-width: 100%; box-sizing: border-box; }
    .ls-convo2, .ls-row, .ls-row-main { min-width: 0; }
    .ls-fd-elbow { margin-left: 8px; }
    .ls-wf-base { margin: 0; }   /* the -26px flare overflows narrow viewports */
}