/* 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: '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';
    --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-terr: #D06E4B;
    --sic-gold: #CDA349;
    --sic-blue: #4A7AFF;
    --sic-paper: #F5F4F2;
    --sic-stone: #6E6E6B;
    --sic-ink: #1B1B1B;
    --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(--sic-paper); } /* overscroll region matches the paper */
.ls-body {
    margin: 0;
    background: var(--sic-paper);
    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. */

#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; }

/* faint architectural verticals — the paper's guide lines */
#ls-stage::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(to right,
            transparent, transparent calc(20% - 1px),
            rgba(27,27,27,0.045) calc(20% - 1px), rgba(27,27,27,0.045) 20%);
    pointer-events: none;
}

/* ---- 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;
    border-radius: 12px;
    padding: 18px 22px;
    line-height: 1.55;
    font-size: 1.02rem;
    opacity: 0;
    will-change: transform, opacity;
}
/* user message — right side, chat-app polarity */
.ls-msg-user {
    background: #fff;
    border: 1px solid rgba(205,163,73,0.65);
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 14px rgba(27,27,27,0.05);
    top: 50vh;
    width: 34rem;           /* fixed — typed text wraps, box never grows */
    box-sizing: border-box;
    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, box-shadow 0.45s, color 0.45s;
}
.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-gold);
    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); } }
/* dotted-outline ghost while the graph builds — the question is parked */
.ls-msg-user.ls-ghost {
    background: transparent;
    border: 1px dashed var(--mark);
    box-shadow: none;
    color: var(--sic-stone);
}
/* AI reply — left side, on the paper itself (no bubble) */
.ls-msg-ai {
    background: transparent;
    border: 1px dashed transparent;
    border-bottom-left-radius: 4px; /* chat tail, AI = left side */
    left: 5vw;
    top: 25vh;
    max-width: 40rem;
    overflow: hidden;
    font-size: 0.98rem;
    transition: background 0.45s, border-color 0.45s, box-shadow 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; }
/* …solid opaque card once it answers, matching the question's style */
.ls-msg-ai.ls-answered {
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 2px 14px rgba(27,27,27,0.05);
}
#typed-q { outline: none; cursor: text; caret-color: var(--sic-gold); }
.ls-msg-user.ls-editing { border-color: var(--sic-gold); }
/* 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-color: var(--sic-gold); }
.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;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--sic-ink);
    border-radius: 999px;
    color: var(--sic-ink);
    padding: 7px 18px;
    cursor: pointer;
    opacity: 0.4;           /* ghosted until 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;
    text-transform: uppercase;
    color: var(--sic-stone);
    margin-top: 8px;
    opacity: 0.75;
}
.ls-caret {
    display: inline-block;
    width: 2px; height: 1.1em;
    background: var(--sic-gold);
    vertical-align: text-bottom;
    margin-left: 2px;
    animation: ls-blink 1s steps(1) infinite;
}
@keyframes ls-blink { 50% { opacity: 0; } }

.ls-msg-live {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sic-ink);
    text-decoration: none;
    border-bottom: 1px dotted var(--sic-gold);
    opacity: 0;
    transition: opacity 0.3s;
}
.ls-msg-live:hover { color: var(--sic-gold); border-bottom-color: var(--sic-ink); }
.ls-msg.ls-live-on .ls-msg-live { opacity: 0.9; }

.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: gold rail on tint, dashed-mark quote box (brand .fn) */
.ls-fnote {
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-left: 3px solid var(--sic-gold);
    background: var(--gold-tint);
    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 */
.ls-fnote.ls-target {
    background: rgba(205,163,73,0.13);
    box-shadow: inset 0 0 0 1px var(--sic-gold);
}
/* footnote grid: equal-height rows, no ragged inline-block gaps */
.ls-fnotes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 8px;
}
.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);
    border-radius: 6px;
    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-gold);
    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: 12px;
    opacity: 0;
    will-change: transform, opacity; /* scrub-driven by JS, no CSS transition */
}
.ls-gutter-caption em { font-family: var(--font1), Georgia, serif; 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 30vh;
}
.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() */
}
.ls-kicker {
    position: absolute;
    left: -110px;
    top: 6px;
    width: 96px;
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sic-stone);
    text-align: left;
    border-top: 1px dashed var(--rule);
    padding-top: 6px;
}
/* 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: 12px; }
.ls-convo2 .ls-x-ai { display: flex; flex-direction: row; gap: 34px; align-items: flex-start; }
.ls-convo2 .ls-x-ai .ls-x-bubble { flex: 0 0 min(26rem, 52%); box-sizing: border-box; max-width: none; }
.ls-convo2 .ls-x-ai .ls-x-bubble.ls-x-widebubble { flex: 0 0 min(38rem, 62%); }
.ls-x-side { flex: 1 1 0; min-width: 0; padding-top: 4px; }
.ls-x-side svg { width: 100%; max-width: 430px; display: block; }
.ls-x-side .ls-annot { margin: 14px 0 4px; font-size: clamp(19px, 1.8vw, 26px); border-top: 1px dashed var(--rule); padding-top: 10px; }
.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: user right, AI left */
.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 {
    max-width: 34rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 14px rgba(27,27,27,0.05);
    padding: 14px 18px;
    line-height: 1.55;
}
/* user speaks with the gold border; agent replies stay plain */
.ls-x-user .ls-x-bubble {
    border-color: rgba(205,163,73,0.65);
}
.ls-x-guest .ls-x-bubble { border-color: rgba(74,122,255,0.45); background: rgba(74,122,255,0.05); }
.ls-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid var(--sic-terr);
    font-family: var(--font-code);
    font-size: 8px;
    color: var(--sic-ink);
    padding: 0 3px;
    margin-right: 5px;
    vertical-align: middle;
}
.ls-av-d { border-color: var(--sic-blue); }
.ls-av-t { border-color: var(--sic-stone); }
.ls-x-ai .ls-x-bubble { border-bottom-right-radius: 12px; border-bottom-left-radius: 4px; }
.ls-x-bubble u { text-decoration-color: var(--sic-gold); 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); }
.ls-x-who {
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sic-stone);
    margin-bottom: 6px;
}
.ls-act .ls-msg-live { opacity: 0.9; margin-top: 8px; }
.ls-act .ls-annot {
    max-width: 34rem;
    /* thin serif base; the beat words carry Avenue X (single-weight face) */
    font-family: var(--font2), Georgia, serif;
    font-weight: 225;
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.2;
    text-wrap: balance;
    color: var(--sic-ink);
    border-top: 1px dashed var(--rule);
    padding-top: 14px;
    margin: 30px 0 8px;
}
.ls-act .ls-annot em {
    font-family: var(--font1), Georgia, serif;
    font-style: normal;
    color: var(--sic-ink);
}
.ls-annot-sub {
    display: block;
    font-family: var(--font2), Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--sic-stone);
    margin-top: 8px;
}

/* 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-gold); text-transform: uppercase; }
.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; }
.ls-clause {
    font-size: 0.78rem;
    font-style: italic;
    padding: 5px 10px;
    border: 1px dashed var(--mark);
    color: var(--sic-ink);
    background: #fff;
}
.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; }
.ls-stmt { border-left: 3px solid var(--sic-gold); background: var(--gold-tint); 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);
    border-radius: 2px;
    padding: 1px 5px;
    margin: 0 4px 3px 0;
}
.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);
    border-radius: 999px;
    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);
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 2px 14px rgba(27,27,27,0.05);
    border-radius: 8px;
    padding: 12px 16px;
    max-width: 250px;
}
.ls-tx-label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--sic-gold);
    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 */
.ls-pr-card {
    border: 1px solid var(--border);
    border-left: 3px solid var(--sic-terr);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: #fff;
}
.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; }
.ls-lens {
    flex: 1 1 240px;
    border: 1px dashed var(--mark);
    padding: 12px 14px;
    background: transparent;
}
.ls-lens-b { border: 1px solid transparent; border-left: 3px solid var(--sic-gold); background: var(--gold-tint); }
.ls-lens-tag {
    display: block;
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    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; }
.ls-approve {
    display: inline-block;
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px dashed var(--sic-stone);
    border-radius: 999px;
    padding: 6px 14px;
    margin-top: 4px;
    color: var(--sic-ink);
    cursor: pointer;
    text-decoration: none;
}
.ls-approve:hover { border-color: var(--sic-gold); background: var(--gold-tint); }

/* 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; border-radius: 3px; }
.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; }

/* 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);
    border-radius: 999px;
}
.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); border-radius: 5px; }
.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: var(--gold-tint);
    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; }
.ls-slack-bot { background: var(--gold-tint); border-left: 3px 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: #fff;
    box-shadow: 0 4px 24px rgba(27,27,27,0.08);
}
.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;
    text-transform: uppercase;
    color: var(--sic-stone);
}
.ls-mode {
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    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: var(--gold-tint); box-shadow: inset 3px 0 0 var(--sic-gold); }
.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;
    text-transform: uppercase;
    color: var(--sic-stone);
    border: 1px dashed var(--mark);
    border-radius: 999px;
    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: var(--gold-tint); 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;
    text-transform: uppercase;
    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-gold); }
.ls-stepin button {
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--sic-ink);
    color: var(--sic-paper);
    border: none;
    padding: 8px 18px;
    cursor: pointer;
}
.ls-stepin button:hover { background: var(--sic-terr); }
.ls-sms-human { border-color: var(--sic-terr) !important; background: rgba(208,110,75,0.07) !important; }
.ls-phone {
    width: 300px;
    border: 1px solid var(--rule);
    border-radius: 26px;
    padding: 26px 14px 18px;
    background: #fff;
    box-shadow: 0 4px 24px rgba(27,27,27,0.07);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ls-sms { font-family: var(--font-ui); font-size: 0.82rem; line-height: 1.45; padding: 9px 13px; border-radius: 14px; max-width: 85%; }
.ls-sms-in  { background: rgba(27,27,27,0.06); align-self: flex-start; border-bottom-left-radius: 4px; }
.ls-sms-out { background: var(--gold-tint); border: 1px solid rgba(205,163,73,0.35); align-self: flex-end; border-bottom-right-radius: 4px; }
.ls-sms-out sup { color: var(--sic-gold); }
.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: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 4px 24px rgba(27,27,27,0.07);
    padding: 26px 30px 30px;
}
.ls-ws-doc-title {
    display: block;
    font-family: var(--font1), Georgia, serif;
    font-size: 1.15rem;
    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;
    text-transform: uppercase;
    color: var(--sic-stone);
}
.ls-ws-tally b { color: var(--sic-ink); }

/* ---- hint / finale ---- */
#ls-hint {
    position: absolute;
    top: min(80vh, calc(100vh - 150px)); /* the slot the AI reply will occupy */
    left: 5vw;              /* JS aligns to the column edge */
    transform: none;
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 620px;
    transition: opacity 0.4s;
}
.ls-hint-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    flex: 0 0 52px;
    border: 1.5px dashed var(--sic-ink);
    border-radius: 50%;
    font-size: 22px;
    color: var(--sic-ink);
    animation: ls-bob 1.6s ease-in-out infinite;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.ls-hint-arrow:hover {
    border-style: solid;
    background: var(--sic-ink);
    color: var(--sic-paper);
    animation-play-state: paused;
}
.ls-hint-copy {
    font-family: var(--font2), Georgia, serif;
    font-weight: 250;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.25;
    color: var(--sic-ink);
}
.ls-hint-copy small {
    display: block;
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sic-stone);
    margin-top: 5px;
}
@keyframes ls-bob { 50% { transform: translateY(5px); } }

#ls-finale {
    position: relative;
    z-index: 60;
    background: var(--sic-paper);
    border-top: 1px dashed var(--rule);
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10vh 8vw;
    box-sizing: border-box;
}
#ls-finale h2 {
    font-family: var(--font1), Georgia, serif;
    font-size: 2.6rem;
    letter-spacing: 0.01em;
    margin: 0 0 1rem;
}
#ls-finale p { max-width: 42rem; line-height: 1.65; color: var(--sic-ink); }
#ls-finale a { color: var(--sic-blue); }
.ls-cta-big {
    margin-top: 2.2rem;
    padding: 16px 34px;
    background: var(--sic-ink);
    color: var(--sic-paper) !important;
    font-family: var(--font-ui);
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    font-size: 1.02rem;
    transition: background 0.15s, transform 0.15s;
}
.ls-cta-big:hover { background: var(--sic-terr); transform: scale(1.03); }

/* 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 { flex-direction: column; gap: 14px; }
    .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-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 two-up and sets the width; keep them readable */
    .ls-card { font-size: 0.68rem; padding: 6px 9px; border-radius: 4px; }
    .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; }
    /* beat text matches the hero voice size on mobile */
    .ls-act .ls-annot, .ls-x-side .ls-annot, .ls-row-aside .ls-annot { font-size: 26px; }
    /* hero beat reads as part of the AI reply column: narrow enough
       that the question wraps to a second line, never full-bleed */
    #ls-herobeat { max-width: 76vw; }
    .ls-row-aside { position: static; width: auto; margin-top: 20px; }
    .ls-kicker { position: static; width: auto; margin-bottom: 20px; }
    #ls-hint { top: 70vh; padding: 0 6vw; }
    .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;
    text-transform: uppercase;
    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 dotted var(--sic-gold);
}
.ls-golinks a:hover { color: var(--sic-gold); }
.ls-golinks .ls-golinks-more {
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: none;
    color: var(--sic-stone);
}

/* finale: install + human start path */
.ls-cta-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; margin-top: 2.2rem; }
.ls-cta-row .ls-cta-big { margin-top: 0; }
.ls-cta-alt {
    font-family: var(--font-code);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sic-ink) !important;
    text-decoration: none;
    border-bottom: 1px dotted var(--sic-gold);
}
.ls-cta-alt:hover { color: var(--sic-gold) !important; }

/* 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-gold); }
.ls-x-user .ls-x-bubble[contenteditable]:focus { border-color: var(--sic-gold); }
.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; gap: 34px; 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-aside { flex: 0 0 290px; }
.ls-row-aside .ls-annot { font-size: clamp(19px, 1.8vw, 26px); border-top: 1px dashed var(--rule); padding-top: 22px; margin: 22px 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;
}

/* go deeper: anchored bottom-right of the section, clearly separated */
.ls-x-ai .ls-x-side { display: flex; flex-direction: column; align-self: stretch; }
.ls-x-side .ls-golinks, .ls-row-aside .ls-golinks {
    margin-top: auto;
    padding-top: 26px;
    justify-content: flex-end;
    text-align: right;
    border-top: none;
}
.ls-x-side .ls-golinks { min-height: 0; }
.ls-row-aside .ls-golinks { margin-top: 34px; }
.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,
.ls-msg-user.ls-compact .ls-msg-live {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    pointer-events: none;
}
.ls-ask-hint, .ls-send, .ls-msg-live { transition: opacity 0.3s, max-height 0.3s, margin 0.3s; max-height: 60px; }

/* hero beat: the promise, left column, beat-text voice */
#ls-herobeat {
    position: absolute;
    top: 19vh;              /* JS bottom-aligns to the question minus card gap */
    left: 5vw;              /* JS aligns to the column */
    max-width: 40rem;       /* same width as the answer card */
    font-family: var(--font2), Georgia, serif;
    font-weight: 225;
    font-size: clamp(26px, 2.7vw, 40px);
    line-height: 1.18;
    text-wrap: balance;
    color: var(--sic-ink);
    opacity: 0;
    transition: opacity 0.6s;
    will-change: opacity;
}
#ls-herobeat em {
    font-family: var(--font1), Georgia, serif;
    font-style: normal;
}
#ls-herobeat .ls-annot-sub {
    max-width: 24rem;
    margin-top: 14px;
    font-family: var(--font-code);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sic-stone);
    line-height: 1.6;
}



/* ---- 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. */
#hero-artifacts {
    position: absolute;
    width: 34rem;
    margin-top: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}
#hero-artifacts .ls-artifact { padding: 8px 0; }
#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; text-transform: uppercase;
    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-terr); }
.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); }
.ls-marker { position: relative; width: 30px; height: 30px; margin-top: 2px; }
.ls-marker svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ls-marker .ring { fill: none; stroke: var(--mark); stroke-width: 1.3; stroke-dasharray: 2.6 3; vector-effect: non-scaling-stroke; }
.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-terr); }
.ls-desc { font-size: 13px; color: var(--sic-stone); line-height: 1.45; font-style: italic; }


/* ---------------- mailing-list signup ---------------- */
.ls-finale-subscribe {
    margin-top: 3rem;
    padding-top: 1.4rem;
    border-top: 1px dashed var(--rule);
}
.ls-finale-subscribe p { font-size: 0.95rem; color: var(--sic-stone); margin: 0; }

/* inline signup — dashed-underline input on paper + approve-style pill button */
.ls-sub-form {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 16px auto 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;
    text-transform: uppercase;
    color: var(--sic-ink);
    background: transparent;
    border: 1px dashed var(--sic-stone);
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
}
.ls-sub-form button[type="submit"]:hover { border-color: var(--sic-gold); background: var(--gold-tint); }
.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; text-transform: uppercase; 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;
    text-transform: uppercase;
    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-blue); }