/* Sound becoming words. Loaded by the desktop and mobile sites; see assets/js/voices.js. */

/* ---------- Hearts touched: plain quotes by default ---------- */

.echo { position: relative; padding: 70px 0; }
.echo-pin { position: relative; }
.echo-canvas, .echo-figure, .echo-state, .echo-rail, .echo-mark { display: none; }
.echo-copy { width: min(100%, 1240px); margin: 0 auto; padding: 0 24px; }
.echo-head { margin-bottom: 34px; }
.echo-head h2 { margin: 12px 0 0; font-family: var(--serif); font-weight: 340; font-size: clamp(38px, 5vw, 72px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.echo-quote { margin: 0 0 18px; padding: 28px; border: 1px solid var(--rule); border-radius: 22px; background: var(--bg-raised); }
.echo-quote blockquote { margin: 0 0 18px; font-family: var(--serif); font-weight: 340; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.24; letter-spacing: -0.012em; color: var(--ink); }
.echo-quote figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-3); }
.echo-quote figcaption > span:last-child { display: flex; flex-direction: column; line-height: 1.4; }
.echo-quote strong { color: var(--ink); font-weight: 700; }
.echo .q-avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, var(--gold-soft), var(--gold)); color: #05110C; font-weight: 800; font-size: 15px; }

/* ---------- Hearts touched: the scene ---------- */

.echo.is-live { height: 100vh; height: 100svh; padding: 0; }
.is-live .echo-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background:
        radial-gradient(60vh 60vh at 25% 55%, rgba(76, 177, 122, 0.1), transparent 70%),
        radial-gradient(80vh 50vh at 74% 52%, rgba(224, 188, 106, 0.05), transparent 72%);
}
.is-live .echo-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.is-live .echo-figure {
    display: block;
    position: absolute;
    left: max(0px, calc(50% - 720px));
    bottom: 0;
    width: min(43vw, 82vh, 720px);
    aspect-ratio: 1;
    pointer-events: none;
}
.is-live .echo-state {
    display: inline-flex;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    background: rgba(5, 17, 12, 0.72);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ink-2);
    opacity: 0;
    pointer-events: none;
}
.echo-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.echo-state.is-out i { background: var(--mint); }

.is-live .echo-copy {
    position: absolute;
    z-index: 3;
    left: max(44vw, calc(50% - 60px));
    right: max(40px, calc(50% - 660px));
    top: 0;
    bottom: 0;
    width: auto;
    margin: 0;
    padding: clamp(84px, 13vh, 130px) 0 clamp(70px, 11vh, 100px);
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
.is-live .echo-head { flex: none; margin: 0; }
.is-live .echo-head h2 { font-size: clamp(34px, min(4.2vw, 7.4vh), 64px); }
.is-live .echo-quotes { position: relative; flex: 1; min-height: 0; }
.is-live .echo-quote {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.is-live .echo-mark {
    display: block;
    height: 0.6em;
    font-family: var(--serif);
    font-size: clamp(60px, 7vw, 104px);
    line-height: 1;
    color: var(--gold);
    opacity: 0;
}
.is-live .echo-quote blockquote {
    margin: 0 0 clamp(18px, 3.2vh, 32px);
    font-size: clamp(25px, min(2.85vw, 5vh), 44px);
    line-height: 1.22;
    opacity: 0;
    pointer-events: auto;
}
.is-live .echo-quote figcaption { opacity: 0; pointer-events: auto; }
.echo .vw { transition: color 0.5s linear, text-shadow 0.5s linear; }
.echo .vw.is-said { color: var(--gold-soft); text-shadow: 0 0 22px rgba(224, 188, 106, 0.55); transition-duration: 0.12s; }

.is-live .echo-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 14px;
    position: absolute;
    z-index: 4;
    left: max(44vw, calc(50% - 60px));
    right: max(40px, calc(50% - 660px));
    bottom: clamp(24px, 4.4vh, 44px);
}
.echo-rail button { padding: 8px 0 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink-3); font: 600 12.5px/1.3 var(--sans); }
.echo-rail button.is-active { color: var(--ink); }
.echo-line { display: block; height: 2px; overflow: hidden; margin-bottom: 8px; background: var(--rule); border-radius: 2px; }
.echo-line b { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--mint)); transform: scaleX(0); transform-origin: 0 50%; }
.echo-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 760px) {
    .echo { padding: 40px 0; }
    .echo-copy { padding: 0 20px; }
    .echo.is-live { height: 100vh; height: 100svh; }
    .is-live .echo-pin { background: radial-gradient(60vw 60vw at 30% 34%, rgba(76, 177, 122, 0.12), transparent 70%); }
    .is-live .echo-figure { left: -9vw; right: auto; top: calc(62px + 84px); bottom: auto; width: min(82vw, 36svh); }
    .is-live .echo-copy { left: 20px; right: 20px; padding: 72px 0 0; }
    .is-live .echo-head h2 { font-size: clamp(30px, 9vw, 38px); }
    .is-live .echo-quotes { position: absolute; left: 0; right: 0; top: calc(146px + min(82vw, 36svh) * 1.03); bottom: 118px; flex: none; }
    .is-live .echo-quote { justify-content: flex-start; }
    .is-live .echo-mark { display: none; }
    .is-live .echo-quote blockquote { margin-bottom: 14px; font-size: clamp(19px, min(5.4vw, 2.75svh), 24px); line-height: 1.24; }
    .echo .q-avatar { width: 34px; height: 34px; font-size: 13px; }
    .is-live .echo-quote figcaption { font-size: 12.5px; }
    .is-live .echo-rail { left: 20px; right: 20px; bottom: 84px; gap: 6px; }
    .echo-name { display: none; }
    .echo-rail button { padding: 12px 0 10px; }
    .echo-line { margin: 0; }
    .is-live .echo-state { font-size: 11px; padding: 4px 9px; }
}
@media (max-height: 640px) and (min-width: 761px) {
    .is-live .echo-head h2 { font-size: 30px; }
    .is-live .echo-mark { display: none; }
}

/* ---------- The small moment: a voice lands as words ---------- */

.vz-wait { opacity: 0; }
[data-voice] { transition: opacity 0.22s linear; }
.voice-canvas { position: absolute; z-index: 3; pointer-events: none; }

/* ---------- Scholars: many voices, one tradition ---------- */

.voice-chorus { position: relative; display: block; width: 100%; height: clamp(90px, 13vh, 150px); margin-top: 34px; pointer-events: none; }
.voice-chorus canvas { display: block; width: 100%; height: 100%; }

/* ---------- About: light rising from the names ---------- */

[data-motes] { position: relative; overflow: hidden; }
[data-motes] > .container, [data-motes] > *:not(.motes-canvas) { position: relative; z-index: 1; }
.motes-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ---------- Contact: the message as sound ---------- */

.type-wave { display: block; width: 100%; height: 56px; margin: 0 0 18px; }
.type-wave canvas { display: block; width: 100%; height: 100%; }

/* ---------- Library: every book is a bar ---------- */

.book-bars { position: relative; margin-top: 44px; padding-top: 56px; max-width: 100%; }
.book-bars-track { display: flex; align-items: flex-end; gap: 3px; height: 92px; }
.book-bar { flex: 1 1 0; min-width: 0; height: var(--h); padding: 0; border: 0; border-radius: 2px; background: rgba(240, 219, 162, 0.32); cursor: pointer; transform: scaleY(0.04); transform-origin: 50% 100%; transition: transform 0.9s var(--ease) calc(var(--i) * 13ms), background-color 0.2s linear; }
.book-bars.is-in .book-bar { transform: none; }
.book-bar:hover, .book-bar:focus-visible, .book-bar.is-on { background: var(--mint); outline: none; }
.book-bars-tip { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; max-width: min(320px, 80vw); padding: 7px 12px; border: 1px solid var(--rule-strong); border-radius: 10px; background: rgba(5, 17, 12, 0.94); font-size: 12px; line-height: 1.35; color: var(--ink-3); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.18s linear; }
.book-bars-tip.is-on { opacity: 1; }
.book-bars-tip strong { color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
    .book-bars-track { gap: 2px; height: 72px; }
    .book-bars { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .book-bar { transform: none; transition: none; }
}


/* ---------- The shelf: a slider where the phone plays the book at the front ---------- */

.stage-glow { position: absolute; left: 50%; top: 50%; width: min(70vw, 900px); height: min(70vw, 900px); margin: calc(min(70vw, 900px) / -2) 0 0 calc(min(70vw, 900px) / -2); border-radius: 50%; overflow: hidden; opacity: 0.5; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); }
.stage-glow img { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(70px) saturate(1.3); opacity: 0; transition: opacity 1s linear; }
.stage-glow img.is-on { opacity: 1; }

.ring-item { cursor: pointer; pointer-events: none; transform-style: preserve-3d; }
.ring-item img { display: block; border-radius: 6px; transform: translate3d(0, calc(var(--lift, 0) * -14px), calc(var(--lift, 0) * 46px)) scale(calc(1 + var(--lift, 0) * 0.07)); transition: transform 0.45s var(--ease), box-shadow 0.6s ease; -webkit-box-reflect: below 8px linear-gradient(transparent 76%, rgba(255, 255, 255, 0.16)); }
.ring-item:hover img { transform: translate3d(0, -10px, 40px) scale(1.06); }
.ring-item.is-front img { box-shadow: 0 0 0 1px rgba(244, 223, 168, 0.55), 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 60px rgba(224, 188, 106, 0.32); }
.ring-item::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.22), transparent 34%, transparent 70%, rgba(255, 255, 255, 0.06)); transform: translate3d(0, calc(var(--lift, 0) * -14px), calc(var(--lift, 0) * 46px + 1px)) scale(calc(1 + var(--lift, 0) * 0.07)); transition: transform 0.45s var(--ease); pointer-events: none; }
.ring-item img, .ring-item::after, .ring-shade { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ring { top: 46%; }
@media (min-width: 761px) { .ring { --w: clamp(92px, 10.2vw, 142px); } }
.slide-info::before { content: ""; position: absolute; z-index: -1; left: -90px; top: -70px; right: -90px; bottom: -70px; background: radial-gradient(closest-side, rgba(3, 12, 8, 0.82), rgba(3, 12, 8, 0.5) 60%, transparent); pointer-events: none; }
.ring-shade { position: absolute; inset: 0; border-radius: 6px; background: #020806; opacity: 0; pointer-events: none; }
.ring-floor { position: absolute; left: 0; top: 118%; transform: rotateX(90deg); pointer-events: none; opacity: 0.9; }
.stage-phone { will-change: transform; }
.stage-phone .phone { position: relative; }
.stage-phone .phone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 22%, transparent 38%); pointer-events: none; z-index: 3; }
.stage .chip-streak { animation: chip-float 5s ease-in-out infinite; }
@keyframes chip-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.stage-phone .phone { overflow: hidden; }
.lp { position: relative; aspect-ratio: 660 / 1434; overflow: hidden; border-radius: 13% / 6%; background: #0B0907; color: #fff; container-type: inline-size; font-family: var(--sans); display: flex; flex-direction: column; align-items: center; }
.lp-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.lp-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 4, 0.34), rgba(8, 6, 4, 0.72) 44%, rgba(8, 6, 4, 0.96) 70%); }
.lp-bg img { position: absolute; inset: -18%; width: 136%; height: 136%; object-fit: cover; filter: blur(14cqw) saturate(1.5); opacity: 0; transition: opacity 0.7s linear; }
.lp-bg img.is-on, .lp-bg img:first-child:not([class]) { opacity: 1; }
.lp > *:not(.lp-bg) { position: relative; z-index: 1; }
.lp-status { align-self: flex-start; margin: 5.2cqw 0 0 11cqw; font-weight: 700; font-size: 4.4cqw; }
.lp .lp-island { position: absolute; left: 50%; top: 3.4cqw; width: 26cqw; height: 7.2cqw; margin-left: -13cqw; border-radius: 4cqw; background: #000; }
.lp-pill { display: inline-flex; align-items: center; gap: 1.4cqw; margin-top: 8cqw; padding: 1cqw 3cqw; border: 0.3cqw solid rgba(255, 255, 255, 0.24); border-radius: 99cqw; background: rgba(0, 0, 0, 0.28); font-size: 2.9cqw; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #F4D9A6; }
.lp-pill i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--mint); animation: lp-beat 1.4s ease-in-out infinite; }
.lp.is-paused .lp-pill i { animation: none; opacity: 0.5; }
@keyframes lp-beat { 50% { opacity: 0.25; } }
.lp-cover { position: relative; flex: none; width: 66cqw; height: 93cqw; margin-top: 5cqw; padding: 0; border: 0; border-radius: 4cqw; background: rgba(255, 255, 255, 0.05); box-shadow: 0 6cqw 12cqw rgba(0, 0, 0, 0.6), 0 0 0 0.3cqw rgba(255, 255, 255, 0.12); cursor: pointer; overflow: hidden; }
.lp-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.45s linear; }
.lp-cover img.is-on { opacity: 1; }
.lp-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 80cqw; height: 12.6cqw; margin-top: 5cqw; font-size: 5.4cqw; line-height: 1.16; font-weight: 800; text-align: center; letter-spacing: -0.01em; }
.lp-author { width: 76cqw; margin-top: 1.6cqw; font-size: 3.4cqw; text-align: center; color: rgba(255, 255, 255, 0.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-wave { display: flex; align-items: center; gap: 0.9cqw; width: 80cqw; height: 13cqw; margin-top: 3cqw; }
.lp-wave i { flex: 1; height: calc(var(--h) * 100%); border-radius: 1cqw; background: rgba(255, 255, 255, 0.24); transition: background-color 0.2s linear; }
.lp-wave i.is-on { background: var(--mint); }
.lp-times { display: flex; justify-content: space-between; width: 80cqw; margin-top: 1cqw; font-size: 2.9cqw; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.6); }
.lp-controls { display: flex; align-items: center; justify-content: center; gap: 7cqw; margin-top: 2.6cqw; }
.lp-btn { display: grid; place-items: center; width: 11cqw; height: 11cqw; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; transition: transform 0.25s var(--ease); }
.lp-btn:hover { transform: scale(1.14); }
.lp-btn:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
.lp-btn svg { width: 7.4cqw; height: 7.4cqw; }
.lp-play { width: 17cqw; height: 17cqw; background: linear-gradient(145deg, var(--gold-soft), var(--gold)); color: #1A1206; }
.lp-play svg { width: 8.6cqw; height: 8.6cqw; }
.lp-play .i-play { display: none; }
.lp.is-paused .i-play { display: block; }
.lp.is-paused .i-pause { display: none; }

.slide-info { position: absolute; z-index: 6; left: max(32px, calc(50% - var(--phone-w) / 2 - 470px)); top: 7%; width: min(370px, calc(50% - var(--phone-w) / 2 - 90px)); transform: translate3d(0, 26px, 0); opacity: 0; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.85); }
.slide-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--gold-soft); }
.slide-kicker .eq { height: 14px; }
.slide-kicker .eq i { width: 2px; }
.slide-title { margin: 0 0 14px; font-family: var(--serif); font-weight: 320; font-size: clamp(34px, 3.5vw, 56px); line-height: 1.02; letter-spacing: -0.03em; color: var(--ink); font-variation-settings: 'opsz' 144; }
.slide-title .sw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0 0.12em; margin-bottom: -0.12em; }
.slide-title .sw > span { display: inline-block; transform: translate3d(0, 110%, 0) rotate(5deg); transform-origin: 0 100%; transition: transform 0.15s linear; }
.slide-info.is-in .slide-title .sw > span { transform: none; transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1); }
.slide-author { margin: 0 0 14px; font-size: 15.5px; font-weight: 600; color: var(--gold-soft); }
.slide-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; font-size: 12.5px; color: var(--ink-2); text-shadow: none; }
.slide-meta span { padding: 6px 11px; border: 1px solid rgba(240, 219, 162, 0.2); border-radius: 999px; background: rgba(5, 17, 12, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.slide-title, .slide-author, .slide-meta { opacity: 0; transform: translate3d(0, 9px, 0); transition: opacity 0.1s linear, transform 0.1s linear; }
.slide-info.is-in .slide-title, .slide-info.is-in .slide-author, .slide-info.is-in .slide-meta { opacity: 1; transform: none; transition: opacity 0.5s linear, transform 0.8s var(--ease); }
.slide-info.is-in .slide-author { transition-delay: 0.16s; }
.slide-info.is-in .slide-meta { transition-delay: 0.24s; }
.stage.is-live .slide-info, .stage.is-live .slide-pager { pointer-events: auto; }
.slide-info, .slide-pager { pointer-events: none; }

.slide-pager { position: absolute; z-index: 6; left: 50%; bottom: -2.5%; display: flex; align-items: flex-end; gap: 3px; height: 40px; transform: translate3d(-50%, 26px, 0); opacity: 0; }
.slide-pager button { position: relative; width: 11px; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.slide-pager button::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 0; height: calc(var(--h) * 100%); border-radius: 3px; background: rgba(240, 219, 162, 0.3); transition: background-color 0.3s linear, transform 0.5s var(--ease); transform-origin: 50% 100%; }
.slide-pager button:hover::after, .slide-pager button:focus-visible::after { background: var(--gold-soft); }
.slide-pager button.is-on::after { background: var(--mint); transform: scaleY(1.25); box-shadow: 0 0 14px rgba(82, 223, 129, 0.7); }
.slide-pager { bottom: 1%; }
.slide-pager button:focus-visible { outline: none; }
.slide-hint { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-3); transition: opacity 0.4s linear; }
.slide-hint.is-off { opacity: 0; }
.slide-open { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--rule-strong); border-radius: 999px; background: rgba(5, 17, 12, 0.6); color: var(--ink); font: 700 13.5px/1 var(--sans); cursor: pointer; text-shadow: none; transition: background-color 0.25s linear, color 0.25s linear, border-color 0.25s linear; }
.slide-open:hover, .slide-open:focus-visible { background: var(--mint); border-color: var(--mint); color: #05110C; outline: none; }
.stage .chip-streak { right: -210px; top: 4%; }
.stage.is-live .ring-item { pointer-events: auto; }

html:not(.motion-on) .slide-info, html:not(.motion-on) .slide-pager { opacity: 1; transform: translate3d(0, 0, 0); pointer-events: auto; }
html:not(.motion-on) .slide-pager { transform: translate3d(-50%, 0, 0); }
html:not(.motion-on) .slide-title, html:not(.motion-on) .slide-author, html:not(.motion-on) .slide-meta { opacity: 1; transform: none; }

@media (max-width: 1040px) {
    .slide-info { left: 20px; width: min(230px, calc(50% - var(--phone-w) / 2 - 30px)); }
    .slide-title { font-size: 26px; }
    .slide-hint { display: none; }
    .stage .chip-streak { right: -110px; }
}
@media (max-width: 760px) {
    .slide-info { display: none; }
    .stage .chip-streak { right: -46px; top: -5%; }
    .slide-pager button { width: 8px; }
    .slide-pager button::after { left: 2px; right: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-pill i { animation: none; }
}

/* ---------- Questions: answers spoken, then written ---------- */

.vz-ans { display: block; }
.faq details, .m-faq details { position: relative; }
.faq summary::after, .m-faq summary::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: linear-gradient(90deg, var(--mint), var(--gold)); transform: scaleX(0); transform-origin: 0 50%; }
.faq details.is-speaking summary::after, .m-faq details.is-speaking summary::after { animation: vz-speak 1.5s var(--ease, ease) forwards; }
@keyframes vz-speak { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ---------- The footer wordmark, made of sound ---------- */

.mark-canvas { position: absolute; z-index: 2; pointer-events: none; }
.wordmark.is-sound, .m-wordmark.is-sound { cursor: crosshair; }
.wordmark.is-sound .ch, .wordmark.is-sound em, .m-wordmark.is-sound, .m-wordmark.is-sound em { opacity: 0; }
.wordmark.is-sound { color: transparent; }
.vz-clone, .vz-clone * { transform: none !important; opacity: 1 !important; transition: none !important; animation: none !important; }

/* ---------- Auto-scroll ---------- */

.tour-btn { display: inline-flex; align-items: center; gap: 9px; margin: 12px 0 0 0; padding: 8px 14px 8px 8px; border: 1px solid rgba(82, 223, 129, 0.4); border-radius: 999px; background: rgba(82, 223, 129, 0.1); color: var(--ink); font: 700 13px/1 var(--sans); cursor: pointer; text-shadow: none; transition: background-color 0.25s linear, border-color 0.25s linear; }
.tour-btn:hover, .tour-btn:focus-visible { background: rgba(82, 223, 129, 0.2); border-color: var(--mint); outline: none; }
.tour-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mint); color: #05110C; }
.tour-ico svg { width: 13px; height: 13px; }
.tour-btn .i-pause, .tour-btn.is-on .i-play { display: none; }
.tour-btn.is-on .i-pause { display: block; }
.slide-info .tour-btn { display: flex; width: max-content; }

.tour-bar { position: fixed; z-index: 90; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border: 1px solid var(--rule-strong); border-radius: 999px; background: rgba(5, 17, 12, 0.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); color: var(--ink); font: 600 13px/1 var(--sans); transform: translate3d(-50%, 140%, 0); opacity: 0; pointer-events: none; transition: transform 0.5s var(--ease, ease), opacity 0.3s linear; }
.tour-bar.is-on { transform: translate3d(-50%, 0, 0); opacity: 1; pointer-events: auto; }
.tour-bar-text { white-space: nowrap; }
.tour-bar .eq { height: 14px; }
.tour-bar .eq i { width: 2px; }
.tour-speed { padding: 7px 12px; border: 1px solid var(--rule-strong); border-radius: 999px; background: none; color: var(--gold-soft); font: 700 12px/1 var(--sans); cursor: pointer; }
.tour-stop { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--mint); color: #05110C; cursor: pointer; }
.tour-stop svg { width: 14px; height: 14px; }
.tour-speed:focus-visible, .tour-stop:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.mh-tour { position: relative; z-index: 2; display: flex; justify-content: center; margin: -2px 0 10px; }
.mh-tour .tour-btn { margin: 0; padding: 6px 12px 6px 6px; font-size: 12.5px; }
.mh-tour .tour-ico { width: 22px; height: 22px; }
@media (max-width: 760px) {
    .tour-bar { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }
}

/* ---------- Library: books you can hold ---------- */

.books .book .cover-wrap { display: block; position: relative; transform-style: preserve-3d; transition: transform 0.6s var(--ease, ease); will-change: auto; }
.books .book:hover .cover-wrap { transition: transform 0.12s linear; }
.books .book .cover-wrap::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 50% at var(--gx, 50%) var(--gy, 30%), rgba(255, 246, 220, 0.28), transparent 70%); opacity: 0; transition: opacity 0.35s linear; pointer-events: none; mix-blend-mode: screen; }
.books .book:hover .cover-wrap::after { opacity: 1; }
.books .book:hover .cover { transform: none; }
.book-wave { display: flex; align-items: center; gap: 2px; height: 22px; margin: 12px 0 2px; opacity: 0.55; transition: opacity 0.3s linear; }
.book-wave i { flex: 1; height: calc(var(--h) * 100%); border-radius: 2px; background: rgba(240, 219, 162, 0.38); transform-origin: 50% 50%; transition: background-color 0.3s linear; }
.book:hover .book-wave, .book:focus-visible .book-wave { opacity: 1; }
.book:hover .book-wave i, .book:focus-visible .book-wave i { background: var(--mint); animation: vz-bar 1.15s ease-in-out var(--d) infinite; }
@keyframes vz-bar { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }

/* ---------- Scholars without a photo: a monogram, not an empty box ---------- */

.scholar-initials, .m-initials {
    background:
        radial-gradient(closest-side, rgba(224, 188, 106, 0.22), transparent 72%),
        repeating-conic-gradient(from 11.25deg, rgba(224, 188, 106, 0.09) 0deg 11.25deg, transparent 11.25deg 22.5deg),
        linear-gradient(160deg, #10241C, #071510);
}
.scholar-initials { font-size: 0 !important; }
.scholar-initials::before, .m-initials::before { content: ""; position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; border: 1px solid rgba(224, 188, 106, 0.4); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: inset 0 0 0 8px rgba(224, 188, 106, 0.06), 0 0 40px rgba(224, 188, 106, 0.12); }
.scholar-initials::after { content: attr(data-initials); position: relative; font-size: 60px; line-height: 1; font-family: var(--serif); font-style: italic; letter-spacing: -0.02em; background: linear-gradient(176deg, #FBEFC6 8%, #E8C877 46%, #B98D3C 82%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Lists that arrive one item after another ---------- */

[data-sequence].is-waiting > * { opacity: 0; transform: translate3d(-14px, 0, 0); }
[data-sequence].is-in > * { opacity: 1; transform: none; transition: opacity 0.5s linear calc(var(--i) * 90ms), transform 0.7s var(--ease, ease) calc(var(--i) * 90ms); }
[data-sequence] svg { transition: transform 0.5s var(--ease, ease) calc(var(--i) * 90ms + 0.2s); }
[data-sequence].is-waiting svg { transform: scale(0); }
[data-sequence].is-in svg { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
    .book:hover .book-wave i { animation: none; }
}

/* ---------- Previous and Next, for the Top 10 and the testimonials ---------- */

.echo-nav, .chart-nav { display: none; }
.is-live .echo-nav, .chart.is-live .chart-nav { display: flex; align-items: center; gap: 12px; position: absolute; z-index: 6; }
.is-live .echo-nav { right: max(40px, calc(50% - 660px)); bottom: calc(clamp(24px, 4.4vh, 44px) + 50px); }
.chart.is-live .chart-nav { left: 24px; bottom: calc(clamp(24px, 3.6vh, 36px) + 46px); }
@media (min-width: 1240px) { .chart.is-live .chart-nav { left: calc(50% - 620px + 24px); } }
.nav-btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--rule-strong); border-radius: 50%; background: rgba(5, 17, 12, 0.7); color: var(--ink); cursor: pointer; transition: background-color 0.25s linear, border-color 0.25s linear, color 0.25s linear, opacity 0.25s linear, transform 0.3s var(--ease, ease); }
.nav-btn svg { width: 20px; height: 20px; }
.nav-btn:hover, .nav-btn:focus-visible { background: var(--mint); border-color: var(--mint); color: #05110C; outline: none; transform: scale(1.06); }
.nav-btn:disabled { opacity: 0.3; cursor: default; transform: none; background: rgba(5, 17, 12, 0.7); border-color: var(--rule-strong); color: var(--ink); }
.nav-btn.is-ready { border-color: var(--mint); box-shadow: 0 0 0 0 rgba(82, 223, 129, 0.5); animation: nav-ready 1.8s ease-out infinite; }
@keyframes nav-ready { 0% { box-shadow: 0 0 0 0 rgba(82, 223, 129, 0.45); } 100% { box-shadow: 0 0 0 16px rgba(82, 223, 129, 0); } }
.nav-count { min-width: 52px; text-align: center; font: 600 14px/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nav-count b { color: var(--ink); font-weight: 700; }
.echo-rail button { pointer-events: auto; }
@media (max-width: 760px) {
    .is-live .echo-nav { left: 20px; right: 20px; justify-content: space-between; bottom: 124px; }
    .is-live .echo-quotes { bottom: 178px; }
    .nav-btn { width: 44px; height: 44px; }
}
@media (max-width: 980px) {
    .chart.is-live .chart-nav { left: 50%; transform: translateX(-50%); bottom: calc(clamp(24px, 3.6vh, 36px) + 44px); }
}
@media (prefers-reduced-motion: reduce) { .nav-btn.is-ready { animation: none; } }

/* ---------- Hero refinements ---------- */

/* A voice drawn under the promise: it opens from the middle after the words, then speaks softly */
.hero-voice { display: flex; align-items: center; justify-content: center; gap: 3px; width: min(420px, 70vw); height: 34px; margin: 4px auto 30px; }
.hero-voice i { flex: 1; max-width: 3px; height: calc(var(--h) * 100%); border-radius: 2px; background: linear-gradient(180deg, var(--gold-soft), var(--gold)); transform-origin: center; animation: hero-voice 1.6s ease-in-out var(--d) infinite; }
.hero-voice i:nth-child(n+37) { background: linear-gradient(180deg, #8CF2B0, var(--mint)); }
@keyframes hero-voice { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
.motion-on .hero-voice { clip-path: inset(0 50% 0 50%); animation: hero-voice-open 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--intro-delay, 0s) + 1.1s); }
@keyframes hero-voice-open { to { clip-path: inset(0 0 0 0); } }
.show-intro .hero-voice { --intro-delay: 4s; }
.from-nav .hero-voice { --intro-delay: 0.35s; }

/* Up next: the book the ring turns to after this one */
.chip-next { gap: 12px; padding: 10px 16px 10px 10px; max-width: 250px; }
.chip-next > img { width: 34px; height: 48px; border-radius: 4px; object-fit: cover; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); flex-shrink: 0; transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.chip-next span { min-width: 0; }
.chip-next small { color: var(--mint); }
.chip-next strong { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.25s ease; }
.chip-next.is-changing > img { opacity: 0; transform: translateX(8px); }
.chip-next.is-changing strong { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .hero-voice i { animation: none; }
    .motion-on .hero-voice { clip-path: none; animation: none; }
}