/* ============================ 04 — THE WORK OF READING ===================== */
.s4-beam {
  position: absolute;
  left: 0;
  top: -10%;
  width: 42%;
  height: 120%;
  pointer-events: none;
  background: linear-gradient(104deg, rgba(255, 248, 226, .75), rgba(255, 246, 222, .1) 58%, transparent 76%);
  filter: blur(34px);
  mix-blend-mode: screen;
  opacity: 0;
}

.s4-panel {
  position: relative;
  padding: 34px 36px 26px;
  border: 1px solid rgba(139, 106, 63, .22);
  background: linear-gradient(160deg, rgba(255, 253, 246, .74), rgba(255, 253, 246, .24));
}
.s4-legend {
  display: flex;
  gap: 26px;
  margin-bottom: 10px;
}
.s4-legend .lg {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.s4-legend .lg::before {
  content: '';
  width: 22px;
  height: 2px;
  background: currentColor;
}
.lg--a { color: var(--gold-deep); }
.lg--b { color: var(--teal); }

.s4-trace { width: 100%; height: auto; display: block; }
.s4-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(34, 38, 43, .38);
  padding-top: 4px;
}

.s4-ledger { margin-top: 34px; }