/* ============================ 02 — THE MIND =============================== */
.s2 {
  background:
    radial-gradient(90% 80% at 62% 40%, #fbf5e8 0%, #f2e6d1 52%, #e6d4b7 100%);
}
.s2-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 58% at 70% 42%, rgba(29, 111, 106, .10), transparent 68%),
    radial-gradient(40% 40% at 18% 18%, rgba(255, 252, 240, .8), transparent 70%);
}
.s2-rail { position: absolute; top: 0; left: 0; width: 5760px; height: 1080px; will-change: transform; }
.s2-act { position: absolute; top: 0; width: 1920px; height: 1080px; }
.s2-a1 { left: 0; }
.s2-a2 { left: 1920px; }
.s2-a3 { left: 3840px; }

.s2-copy { position: absolute; z-index: 3; }
.s2-h { font-size: 64px; line-height: 1.04; margin-top: 22px; max-width: 640px; }
.s2-p { font-size: 19px; margin-top: 22px; max-width: 560px; }
.s2-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-width: 560px;
}
.s2-list li {
  position: relative;
  padding-left: 20px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.s2-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 1px;
  background: var(--gold);
}
.s2-list b { color: var(--ink); font-weight: 600; }
.s2-cite { position: static; margin-top: 34px; }
.s2-note-line { display: flex; align-items: center; gap: 14px; margin-top: 26px; max-width: 600px; }
.s2-note-line .small { font-size: 12.5px; line-height: 1.45; max-width: 400px; }

.s2-halo {
  position: absolute;
  left: 820px;
  top: 130px;
  width: 840px;
  height: 780px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 46%, rgba(255, 252, 242, .55) 0%, rgba(255, 244, 217, .28) 44%, rgba(201, 226, 220, .1) 68%, transparent 84%);
  filter: blur(34px);
}
.s2-brain { position: absolute; left: 800px; top: 160px; width: 880px; height: 741px; z-index: 2; }
.s2-labels { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.s2-lab { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.s2-lab > i {
  position: absolute;
  left: -3.5px;
  top: -3.5px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  background: rgba(255, 251, 242, .92);
  box-shadow: 0 0 0 3px rgba(255, 250, 238, .5);
}
.s2-lab > i::after {
  content: '';
  position: absolute;
  top: 2px;
  width: 34px;
  height: 1px;
  background: rgba(151, 118, 47, .42);
}
.s2-lab b,
.s2-lab span {
  position: absolute;
  display: block;
  white-space: nowrap;
  font-family: var(--sans);
  line-height: 1.2;
}
.s2-lab b {
  font-size: 9.5px;
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--bronze);
}
.s2-lab span { font-size: 10.5px; color: rgba(34, 38, 43, .45); }

/* text to the right of the marker */
.s2-lab.r > i::after { left: 7px; }
.s2-lab.r b { left: 48px; top: -7px; }
.s2-lab.r span { left: 48px; top: 7px; }
/* text to the left of the marker */
.s2-lab.l > i::after { right: 7px; }
.s2-lab.l b { right: 48px; top: -7px; text-align: right; }
.s2-lab.l span { right: 48px; top: 7px; text-align: right; }
/* text below the marker */
.s2-lab.b > i::after { left: 2px; top: 7px; width: 1px; height: 30px; }
.s2-lab.b b { left: -46px; top: 42px; width: 96px; text-align: center; }
.s2-lab.b span { left: -80px; top: 56px; width: 164px; text-align: center; }

/* act II — fragmentation */
.s2-scatter { position: absolute; left: 940px; top: 168px; width: 780px; height: 620px; z-index: 2; }
.note-card {
  position: absolute;
  width: 172px;
  height: 112px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(150deg, rgba(24, 29, 33, .93), rgba(38, 45, 50, .9));
  border: 1px solid rgba(247, 241, 230, .12);
  border-radius: 7px;
  transform: rotate(var(--r));
  box-shadow: 0 18px 40px -18px rgba(18, 22, 26, .6);
  font-family: var(--sans);
  font-size: 11px;
  color: rgba(247, 241, 230, .72);
}
.note-card .nc-ic {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(247, 241, 230, .1);
  color: var(--gold-lit);
  font-size: 11px;
}
.s2-focus {
  position: absolute;
  left: 1110px;
  top: 232px;
  width: 470px;
  height: 430px;
  padding: 34px 40px;
  background: linear-gradient(160deg, #fffdf6, #f6ecd8 70%, #eee1c8);
  border: 1px solid rgba(200, 161, 85, .35);
  box-shadow: 0 40px 80px -40px rgba(40, 30, 14, .5);
  z-index: 2;
}
.s2-focus-head {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .3em;
  color: var(--gold-deep);
  text-transform: uppercase;
}
.s2-focus-body {
  font-family: var(--serif);
  font-size: 34px;
  color: rgba(48, 38, 24, .8);
  margin-top: 16px;
}
.s2-focus-rule {
  width: 54px;
  height: 1px;
  background: rgba(151, 118, 47, .55);
  margin-top: 18px;
}
.s2-focus-lines { display: flex; flex-direction: column; gap: 11px; margin-top: 26px; }
.s2-focus-lines i {
  height: 1px;
  background: rgba(90, 72, 46, .22);
  transform-origin: left center;
}
.s2-focus-lines i:nth-child(3n) { width: 88%; }
.s2-focus-lines i:nth-child(4n) { width: 94%; }
.s2-focus-lines i:nth-child(7n) { width: 74%; }
.s2-focus-lines i:last-child { width: 46%; }
.s2-focus-folio {
  position: absolute;
  left: 40px;
  bottom: 30px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .24em;
  color: rgba(90, 72, 46, .4);
}
.s2-wave { position: absolute; left: 1000px; top: 786px; width: 700px; height: 130px; z-index: 2; }
.s2-wave-cap {
  position: absolute;
  left: 1000px;
  top: 886px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(29, 111, 106, .6);
  z-index: 2;
}

/* act III — calm */
.s2-window {
  position: absolute;
  left: 1160px;
  top: 110px;
  width: 620px;
  height: 660px;
  overflow: hidden;
  background: linear-gradient(180deg, #fff6e2 0%, #ffe9c4 42%, #f6d9ae 100%);
  box-shadow: inset 0 0 120px rgba(255, 255, 255, .7), 0 30px 70px -40px rgba(80, 58, 22, .35);
  z-index: 1;
}
.s2-window::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 70% 20%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%);
}
.s2-window-bars { position: absolute; inset: 0; z-index: 2; }
.s2-window-bars i {
  position: absolute;
  background: rgba(120, 92, 52, .22);
}
.s2-window-bars i:nth-child(1) { left: 50%; top: 0; bottom: 0; width: 10px; transform: translateX(-5px); }
.s2-window-bars i:nth-child(2) { left: 0; right: 0; top: 44%; height: 10px; }
.s2-window-bars i:nth-child(3) { inset: 0; border: 14px solid rgba(120, 92, 52, .18); }
.s2-window-light {
  position: absolute;
  left: -220px;
  top: -120px;
  width: 760px;
  height: 980px;
  background: linear-gradient(102deg, rgba(255, 250, 232, .95), rgba(255, 240, 200, .2) 55%, transparent 70%);
  transform: rotate(8deg);
  mix-blend-mode: screen;
  filter: blur(12px);
}
.s2-reader { position: absolute; left: 1090px; top: 300px; width: 440px; height: 474px; z-index: 3; }
.s2-reader svg { width: 100%; height: 100%; filter: drop-shadow(0 26px 36px rgba(60, 42, 20, .22)); }
.s2-calm { position: absolute; left: 1160px; top: 792px; width: 620px; z-index: 3; }
.s2-calm svg { width: 100%; height: 52px; }
.s2-calm .micro { display: block; margin-top: 10px; }

.s2-verdict { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; max-width: 600px; }
.v-row {
  display: grid;
  grid-template-columns: 14px 190px 1fr;
  align-items: center;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(34, 38, 43, .1);
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.v-row b { color: var(--ink); font-weight: 600; font-size: 13px; }
.v-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(34, 38, 43, .2); }
.v-dot.on { background: #2f8f88; }
.v-dot.mid { background: var(--gold); }
.v-dot.off { background: rgba(34, 38, 43, .22); }

.s2-chapters {
  position: absolute;
  right: 120px;
  top: 96px;
  display: flex;
  gap: 22px;
  z-index: 6;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .22em;
  color: rgba(34, 38, 43, .28);
}
.s2-chapters span { padding-bottom: 6px; border-bottom: 1px solid rgba(34, 38, 43, .1); }
