/* ═══════════════════════════════════════════════════════════════════
   READ MORE   (pairs with js/more.js)
   Progressive disclosure for long copy. The full text is always in the
   DOM (SEO, assistive tech, no-JS). JS marks the block ready, which
   collapses it behind a small pill; the pill animates it open with the
   grid-rows technique (no height measuring).
   Markup: <div class="more" data-more>
             <button class="more-btn" aria-expanded="false"><span>Read more</span><i></i></button>
             <div class="more-body"><div> ...full text... </div></div>
           </div>
   ═══════════════════════════════════════════════════════════════════ */
.more { --more-c: #7C6432; --more-line: rgba(124, 100, 50, 0.35); }
.more-dark, .idl-stage .more, .bg-bespoke-dark .more, .bg-bespoke-green .more, .gg .more, .sys .more, #relay .more, #close-section .more { --more-c: #D5B473; --more-line: rgba(213, 180, 115, 0.4); }
.more-btn { display: none; }
.more-body { display: grid; grid-template-rows: 1fr; }
.more-body > div { min-height: 0; overflow: hidden; }
[data-more="ready"] .more-btn,
[data-more="open"] .more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.55em 0.95em 0.55em 1.05em;
    border-radius: 999px;
    border: 1px solid var(--more-line);
    background: transparent;
    color: var(--more-c);
    font: 600 10px/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 300ms ease, border-color 300ms ease;
}
.more-btn:hover { border-color: var(--more-c); }
.more-btn:focus-visible { outline: 2px solid var(--more-c); outline-offset: 3px; }
.more-btn i { position: relative; width: 9px; height: 9px; }
.more-btn i::before, .more-btn i::after {
    content: "";
    position: absolute;
    left: 0; top: 4px;
    width: 9px; height: 1.5px;
    background: currentColor;
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.more-btn i::after { transform: rotate(90deg); }
[data-more="open"] .more-btn i::after { transform: rotate(0deg); }
[data-more="ready"] .more-body { grid-template-rows: 0fr; }
[data-more] .more-body { transition: grid-template-rows 560ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-more="ready"] .more-body > div { opacity: 0; }
[data-more="open"] .more-body > div { opacity: 1; transition: opacity 500ms ease 120ms; }
[data-more="open"] .more-body > div > :first-child { margin-top: 0.9rem; }
.more-body p { margin: 0 0 0.75rem; }
.more-body p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
    [data-more] .more-body, [data-more] .more-body > div, .more-btn i::before, .more-btn i::after { transition: none !important; }
}

/* Folded paragraphs: the lead keeps the original paragraph's type (the
   wrapper carries its classes); spacing is handled here. */
[data-brief] > .brief-lead { margin: 0; }
[data-brief] > .more { margin-top: 0.85rem; }
[data-brief] .more-body p { margin: 0; }