:root {
  --symbol-gold: #d4b878;
  --symbol-gold-bright: #f1d995;
  --symbol-copper: #9f7437;
  --symbol-ink: #080909;
  --symbol-panel: #111312;
  --symbol-line: rgba(212, 184, 120, .36);
}

/* Keep the established dark hexagonal lesson backdrop visible behind every section. */
.theory-lesson-page .lesson-content-wrap {
  background: #050505 url("../images/backgrounds/blackhex.webp") center top / cover fixed no-repeat;
}

.theory-lesson-page .lesson-content-wrap .lesson-section,
.theory-lesson-page .lesson-content-wrap .lesson-section:nth-of-type(even) {
  background: rgba(5, 5, 5, .78);
}

.theory-lesson-page .lesson-content-wrap .lesson-section::after {
  background: url("../images/backgrounds/blackhex.webp") center / cover no-repeat !important;
  opacity: .42 !important;
}

.symbol-table th,
.symbol-table td {
  vertical-align: top;
}

.symbol-table td:first-child {
  color: #f2d68d;
  font-weight: 700;
}

.symbol-table strong {
  color: #fff1bd;
  white-space: nowrap;
}

.symbol-anatomy,
.root-signal,
.formula-console,
.seventh-meter,
.replace-add-diagram,
.extension-ladder,
.decoder-rack,
.slash-display,
.voicing-constellation,
.key-equation {
  margin: clamp(1.5rem, 4vw, 2.5rem) auto;
}

.symbol-anatomy {
  max-width: 760px;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--symbol-line);
  border-radius: 18px;
  background: #090a09;
  box-shadow: 0 22px 40px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.06);
}

.symbol-anatomy__display,
.symbol-anatomy__labels {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr 1fr;
}

.symbol-anatomy__display span {
  display: grid;
  min-height: 92px;
  place-items: center;
  border: 1px solid rgba(212,184,120,.24);
  color: #fff;
  background: #111312;
  font-size: clamp(2rem, 7vw, 4.6rem);
  line-height: 1;
  text-shadow: 0 0 18px rgba(241,217,149,.18);
}

.symbol-anatomy__display span:first-child { border-radius: 10px 0 0 10px; color: var(--symbol-gold-bright); }
.symbol-anatomy__display span:last-child { border-radius: 0 10px 10px 0; }
.symbol-anatomy__labels span { padding-top: .65rem; color: #a9aaa7; font-size: .7rem; letter-spacing: .13em; text-align: center; text-transform: uppercase; }

.root-signal {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  max-width: 840px;
  align-items: center;
  gap: .8rem;
}

.root-signal > div,
.decoder-rack > div {
  display: grid;
  min-height: 110px;
  align-content: center;
  gap: .35rem;
  padding: 1rem;
  border: 1px solid var(--symbol-line);
  border-radius: 12px;
  background: #111312;
  text-align: center;
  box-shadow: inset 0 -8px 18px rgba(0,0,0,.35);
}

.root-signal small,
.decoder-rack small { color: #a9aaa7; letter-spacing: .1em; text-transform: uppercase; }
.root-signal strong,
.decoder-rack strong { color: var(--symbol-gold-bright); font-size: clamp(1.15rem, 3vw, 1.7rem); }
.root-signal > span,
.decoder-rack > span { color: var(--symbol-copper); font-size: 1.8rem; }

.formula-console {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  max-width: 900px;
  overflow: hidden;
  border: 1px solid var(--symbol-line);
  border-radius: 16px;
  background: #6e582f;
  box-shadow: 0 18px 36px rgba(0,0,0,.3);
}

.formula-console > div {
  display: grid;
  min-height: 130px;
  place-content: center;
  gap: .6rem;
  padding: 1.2rem;
  background: #111312;
  text-align: center;
}

.formula-console span { color: #b9bab7; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.formula-console strong { color: var(--symbol-gold-bright); font-size: clamp(1.1rem, 2.3vw, 1.45rem); }

.seventh-meter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 880px;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--symbol-line);
  border-radius: 16px;
  background: #6e582f;
}

.seventh-meter > div {
  display: grid;
  grid-template-columns: repeat(4, auto);
  min-height: 130px;
  align-content: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.2rem;
  background: #111312;
  text-align: center;
}

.seventh-meter span {
  grid-column: 1/-1;
  color: #b9bab7;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.seventh-meter b {
  color: var(--symbol-gold-bright);
  font-size: clamp(1.1rem, 2.3vw, 1.45rem);
}

.seventh-meter b:not(:last-child)::after { content: " ·"; }

.replace-add-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  max-width: 820px;
  align-items: center;
  gap: 1.25rem;
}

.replace-add-diagram > div:not(.replace-add-diagram__switch) {
  display: grid;
  gap: .35rem;
  padding: 1.4rem;
  border: 1px solid var(--symbol-line);
  border-radius: 14px;
  background: #0b0d0c;
  text-align: center;
}

.replace-add-diagram span { color: #aaa; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.replace-add-diagram strong { color: var(--symbol-gold-bright); font-size: 1.75rem; }
.replace-add-diagram small { color: #fff; font-size: 1.05rem; }
.replace-add-diagram__switch { display: grid; justify-items: center; gap: .35rem; color: #999; font-size: .58rem; letter-spacing: .1em; }
.replace-add-diagram__switch i { display: block; width: 30px; height: 50px; border: 2px solid #555; border-radius: 3px; background: #a40000; box-shadow: 0 0 10px rgba(255,0,0,.5), inset 0 3px rgba(255,255,255,.15); transform: perspective(100px) rotateX(-16deg); }

.extension-ladder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 720px;
  gap: 1rem;
}

.extension-ladder div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .7rem;
  padding: 1rem;
  border: 1px solid var(--symbol-line);
  border-radius: 999px;
  background: #111312;
}

.extension-ladder b,
.extension-ladder strong { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; }
.extension-ladder b { border: 1px solid #555; color: #ccc; background: #111; }
.extension-ladder strong { color: #171008; background: var(--symbol-gold); }
.extension-ladder span { color: #8f918d; font-size: .7rem; text-align: center; text-transform: uppercase; }

.decoder-rack {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  max-width: 980px;
  align-items: center;
  gap: .6rem;
}

.slash-display {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  max-width: 430px;
  align-items: center;
  padding: 1.5rem 1.5rem 3.5rem;
  border: 1px solid var(--symbol-line);
  border-radius: 18px;
  background: #090b0a;
  text-align: center;
}

.slash-display > strong { color: var(--symbol-gold-bright); font-size: clamp(3rem, 9vw, 5rem); }
.slash-display > span { color: #777; font-size: 4rem; font-weight: 300; }
.slash-display small { position: absolute; right: 1.5rem; bottom: 1rem; left: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; color: #999; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }

.voicing-constellation { max-width: 830px; }
.voicing-constellation__core {
  position: relative;
  z-index: 1;
  display: grid;
  width: 190px;
  height: 190px;
  place-content: center;
  gap: .25rem;
  margin: auto;
  border: 10px solid #191919;
  border-radius: 50%;
  background: #111312;
  box-shadow: 0 0 0 2px #8f713e, 0 18px 36px #000;
  text-align: center;
}
.voicing-constellation__core small { color: #aaa; letter-spacing: .12em; text-transform: uppercase; }
.voicing-constellation__core strong { color: #fff2bd; font-size: 2rem; }
.voicing-constellation__core span { color: #ddd; }
.voicing-constellation__branch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: -25px; padding-top: 65px; border-top: 1px solid var(--symbol-line); }
.voicing-constellation__branch span { padding: .8rem; border: 1px solid var(--symbol-line); border-radius: 999px; background: #0b0d0c; color: var(--symbol-gold-bright); text-align: center; }

.method-table td:first-child span {
  display: inline-grid;
  min-width: 34px;
  min-height: 34px;
  place-items: center;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--symbol-gold);
  color: #130e07;
  font-size: .72rem;
}

.key-equation {
  display: flex;
  flex-wrap: wrap;
  max-width: 940px;
  align-items: center;
  justify-content: center;
  gap: .7rem;
}

.key-equation span { padding: .75rem 1rem; border: 1px solid var(--symbol-line); border-radius: 999px; background: #111312; color: var(--symbol-gold-bright); }
.key-equation b { color: #86652f; font-size: 1.4rem; }

.lesson-note {
  margin: 1.5rem 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--symbol-line);
  border-left: 5px solid var(--symbol-gold);
  border-radius: 0 10px 10px 0;
  background: rgba(212,184,120,.07);
  color: #ddd;
}

.lesson-section--final {
  border-color: rgba(212,184,120,.5);
  background: #080908;
}

/* Make the parallax section layer full-bleed, while the child content keeps its reading width. */
.theory-lesson-page .lesson-content-wrap .lesson-section,
.theory-lesson-page .lesson-content-wrap .lesson-section:nth-of-type(even),
.theory-lesson-page .lesson-content-wrap .lesson-section--final {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

@media (max-width: 820px) {
  .formula-console { grid-template-columns: repeat(2, 1fr); }
  .seventh-meter { grid-template-columns: 1fr; }
  .extension-ladder { grid-template-columns: 1fr; max-width: 360px; }
  .decoder-rack { grid-template-columns: 1fr; max-width: 500px; }
  .decoder-rack > span { transform: rotate(90deg); text-align: center; }
  .voicing-constellation__branch { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .symbol-anatomy__display span { min-height: 70px; font-size: clamp(1.45rem, 10vw, 2.7rem); }
  .symbol-anatomy__labels span { font-size: .54rem; letter-spacing: .05em; }
  .root-signal { grid-template-columns: 1fr; }
  .root-signal > span { transform: rotate(90deg); text-align: center; }
  .replace-add-diagram { grid-template-columns: 1fr; }
  .replace-add-diagram__switch { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .replace-add-diagram__switch i { width: 48px; height: 28px; transform: perspective(100px) rotateY(-16deg); }
  .voicing-constellation__branch { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .key-equation { flex-direction: column; }
  .key-equation b { line-height: .7; }
}