/* philosophy page: the two masks */
.philosophy-page .page-head h1 em, .page-head h1 em { color: var(--gold); font-style: normal; }
.masks { text-align: center; }
.mask-toggle {
  display: inline-flex; gap: 0.6rem; margin-bottom: 3rem;
  border: 1px solid var(--hairline); border-radius: 999px; padding: 0.4rem;
}
.mask-btn {
  font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.06em;
  background: none; border: none; color: var(--paper-dim);
  padding: 0.7rem 1.4rem; border-radius: 999px; cursor: pointer;
  transition: color 0.3s, background 0.3s;
}
.mask-btn.is-active { color: var(--ink); background: var(--accent, var(--gold)); }
.mask-btn#btn-truth.is-active { background: var(--teal); }
.mask-stage { max-width: 44rem; margin: 0 auto; min-height: 16rem; }
.mask-lede {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.25;
  margin-bottom: 1.8rem;
  color: var(--paper);
}
.mask-body { color: var(--paper-dim); margin-bottom: 1.6rem; }
.mask-coda { font-style: italic; color: var(--gold); }
body[data-voice="truth"] .mask-coda { color: var(--teal); }

/* tenets + foundation */
.tenets__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.tenet {
  border: 1px solid var(--hairline); padding: 1.8rem;
  background: rgba(31, 26, 21, 0.6);
  transition: border-color 0.35s, transform 0.35s;
}
.tenet:hover { border-color: var(--accent, var(--gold)); transform: translateY(-3px); }
.tenet[data-accent="gold"]    { --accent: var(--gold); }
.tenet[data-accent="crimson"] { --accent: var(--crimson); }
.tenet[data-accent="teal"]    { --accent: var(--teal); }
.tenet[data-accent="violet"]  { --accent: var(--violet); }
.tenet__num { color: var(--accent, var(--gold)); display: block; margin-bottom: 0.8rem; }
.tenet h3 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin-bottom: 0.5rem; }
.tenet p { color: var(--paper-dim); font-size: 1.02rem; }
.foundation { border-top: 1px solid var(--hairline); }
.foundation__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.foundation__grid h2 { margin-bottom: 1.2rem; }
.foundation__grid p { color: var(--paper-dim); margin-bottom: 1.2rem; }
@media (max-width: 860px) {
  .tenets__grid, .foundation__grid { grid-template-columns: 1fr; }
}