/* The experiment's introduction; original chapter typography remains in the page. */
.hero-soliloquy { padding: 6.5rem 0 3rem; }
.sq-eyebrow { color: #95cec9; text-transform: uppercase; letter-spacing: .15em; font-size: .72rem; font-weight: 650; margin: 0 0 1rem; }
.hero-soliloquy h1 { font-size: clamp(2.1rem, 5vw, 3.75rem); letter-spacing: -.04em; }
.hero-soliloquy .subtitle { font-style: normal; color: #b9c6d3; line-height: 1.65; }
.sq-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }
.sq-actions a { margin: 0; padding: .8rem 1.2rem; border-radius: 7px; text-decoration: none; font-size: .9rem; }
.hero-soliloquy .sq-read { background: #a9e2d9; color: #112c30; font-weight: 650; }
.hero-soliloquy .sq-read:hover { background: #c4eee8; color: #112c30; }
.sq-read span { margin-left: .8rem; }
.sq-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; margin: 2.5rem 0; color: #a6b8c8; font-size: .78rem; }
.sq-facts strong { font-size: 1.2rem; color: #eff5fa; margin-right: .3rem; font-weight: 500; }
.sq-opening { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 1.5rem; margin-bottom: 3.5rem; text-align: left; }
.sq-opening-copy { min-width: 0; }
.hero-soliloquy .sq-opening h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.12; }
.hero-soliloquy .sq-opening .subtitle { margin-left: 0; }
.sq-opening .sq-actions, .sq-opening .sq-facts { justify-content: flex-start; }
.sq-opening .sq-facts { gap: .6rem 1.3rem; margin: 2rem 0 0; }
.sq-voices-art { min-width: 0; pointer-events: none; }
.sq-voices-art img { display: block; width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse at center, #000 48%, transparent 74%); mask-image: radial-gradient(ellipse at center, #000 48%, transparent 74%); }
@media (max-width: 800px) {
  .sq-opening { grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 2rem; }
  .sq-voices-art { width: 100%; max-width: 660px; margin-inline: auto; }
}
.hero-soliloquy .intro { max-width: 780px; color: #b9c6d3; }
.hero-soliloquy .intro strong { color: #e8f3f8; font-weight: 550; }
.sq-next { max-width: 780px; margin: 1.75rem auto 0; text-align: left; border-left: 2px solid #86c6bc; background: #14282e; padding: 1rem 1.2rem; color: #b9d0d3; font-size: .9rem; line-height: 1.75; }
.sq-next-label { display: block; color: #a9e2d9; text-transform: uppercase; font-size: .65rem; letter-spacing: .12em; font-weight: 650; margin-bottom: .3rem; }
.sq-experiment { padding: 2rem 0 4rem; }
.sq-wide { width: min(1040px, calc(100% - 40px)); margin: auto; }
.sq-section-heading { text-align: center; margin: 0 auto 2rem; }
.sq-section-heading h2 { margin: 0 0 .8rem; color: #edf4fa; font-size: clamp(1.5rem, 3.3vw, 2.4rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.3; }
#sq-contrast-title { scroll-margin-top: 5rem; }
.sq-section-heading > p:last-child { color: #a6b8c8; font-size: .95rem; }
.sq-diptych { margin: 0; border: 1px solid #35444f; border-radius: 12px; overflow: hidden; background: #15212b; }
.sq-diptych img { display: block; width: 100%; height: auto; }
.sq-diptych figcaption { display: grid; grid-template-columns: 1fr 1fr; }
.sq-diptych figcaption > span { padding: 1.35rem 1.7rem; }
.sq-diptych figcaption > span + span { border-left: 1px solid #35444f; }
.sq-diptych small { display: block; font-size: .64rem; color: #96cec9; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.sq-diptych figcaption > span + span small { color: #edb79a; }
.sq-diptych strong { color: #edf3f8; font-size: clamp(.95rem, 1.7vw, 1.2rem); line-height: 1.5; font-weight: 500; }
.sq-image-note { color: #9aacbc; font-size: .75rem; text-align: center; margin: .85rem 0 2.5rem; }
.sq-observation { max-width: 780px; margin: 0 auto 2.5rem; }
.sq-observation p { color: #d1dce5; font-size: 1.08rem; line-height: 1.85; margin: .75rem 0 0; }
.sq-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; border-top: 1px solid #35444f; padding-top: 2rem; }
.sq-note-number { display: block; color: #93b7c0; font-size: .72rem; margin-bottom: .7rem; }
.sq-notes h3, .sq-memory h3 { color: #e4edf4; font-size: 1.1rem; font-weight: 550; margin: 0 0 .75rem; }
.sq-notes p, .sq-memory p { color: #abbeca; line-height: 1.8; font-size: .93rem; margin: 0 0 1rem; }
.sq-notes a, .sq-memory a { color: #98cec8; text-underline-offset: 4px; font-size: .82rem; }
.sq-memory { display: flex; gap: 1.5rem; align-items: flex-start; margin: 2.5rem 0 0; padding: 1.5rem; border-radius: 9px; background: #15262e; }
.sq-memory svg { width: 84px; flex-shrink: 0; stroke: #94c9c7; fill: none; stroke-width: 1.4; margin-top: .4rem; }
.sq-memory p { margin: 0; }
.sq-memory a { font-size: inherit; }
.toc-section { border-top: 1px solid #35444f; padding: 3rem 0 1rem; scroll-margin-top: 5rem; }
.sq-reading-note { color: #abbeca; font-size: .95rem; line-height: 1.8; margin-bottom: 2rem; }
.toc-section h2 { color: #d6e5ef; }
.toc a, .toc-voice a { text-underline-offset: 4px; }
.toc a:hover, .toc-voice a:hover { text-decoration: underline; }
.hero-soliloquy a:focus-visible, .sq-experiment a:focus-visible, .toc-section a:focus-visible, .back-to-top:focus-visible { outline: 2px solid #ade8de; outline-offset: 5px; }
@media (max-width: 600px) {
  .hero-soliloquy { padding-top: 4rem; }
  .sq-facts { gap: .6rem 1rem; }
  .sq-notes { grid-template-columns: 1fr; gap: 1.75rem; }
  .sq-diptych figcaption > span { padding: .9rem .7rem; }
  .sq-diptych small { font-size: .57rem; letter-spacing: .04em; }
  .sq-memory { display: block; padding: 1.25rem; }
  .sq-memory svg { margin: 0 0 1rem; width: 72px; }
}
@media (prefers-reduced-motion: reduce) { #soliloquy-canvas { display: none; } }