.codex-scroll,
.keystone-scroll{
  line-height:1.72;
}

.codex-label,
.section-label,
.keystone-label{
  margin:0 0 .65rem;
  color:#f0d79a;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.codex-essence-box,
.keystone-essence-box{
  border-left:3px solid rgba(240,215,154,.78);
}

.codex-essence,
.keystone-essence{
  margin:0;
  color:#f7ecd3;
  font-size:1.14rem;
  line-height:1.55;
}

.codex-body p,
.keystone-body p{
  margin-top:0;
  margin-bottom:1rem;
}

.codex-body p:last-child,
.keystone-body p:last-child{
  margin-bottom:0;
}

.codex-grid,
.keystone-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1rem;
  margin-top:1rem;
  margin-bottom:1rem;
}

.codex-list,
.keystone-list{
  margin:0;
  padding-left:1.2rem;
}

.codex-list li,
.keystone-list li{
  margin-bottom:.65rem;
}

.codex-list li:last-child,
.keystone-list li:last-child{
  margin-bottom:0;
}

.codex-links,
.codex-nav-group,
.keystone-links,
.keystone-nav-group{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

.codex-nav-row,
.keystone-nav-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
}

.codex-chip,
.keystone-chip{
  display:inline-block;
  padding:.68rem .95rem;
  border-radius:999px;
  border:1px solid rgba(209,180,100,.35);
  background:rgba(0,0,0,.20);
  color:#f0d79a;
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.codex-chip:hover,
.codex-chip:focus,
.keystone-chip:hover,
.keystone-chip:focus{
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.32);
  border-color:rgba(252,234,187,.75);
  background:rgba(0,0,0,.28);
}

.codex-chip:focus-visible,
.keystone-chip:focus-visible{
  outline:2px solid rgba(252,234,187,.85);
  outline-offset:2px;
}

.codex-chip.is-passive{
  opacity:.9;
  cursor:default;
}

.codex-chip.is-passive:hover,
.codex-chip.is-passive:focus{
  transform:none;
  box-shadow:none;
  border-color:rgba(209,180,100,.35);
  background:rgba(0,0,0,.20);
}

.codex-echo,
.keystone-echo{
  opacity:.9;
  font-style:italic;
}

.keystone-page-header{
  margin-bottom:1.1rem;
}

.keystone-practice{
  display:grid;
  gap:1rem;
}

.practice-card{
  padding:1rem 1rem 1.05rem;
  border:1px solid rgba(240,215,154,.14);
  border-radius:18px;
  background:rgba(255,255,255,.02);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.practice-title{
  margin:0 0 .35rem;
  color:#f3de9f;
  font-weight:600;
}

.practice-body,
.practice-reflection{
  margin:.35rem 0 0;
}

.practice-reflection{
  color:#f7ecd3;
  font-style:italic;
}

.practice-why{
  margin-top:.6rem;
}

.practice-why summary{
  cursor:pointer;
  color:#f0d79a;
}

.keystone-reflection-text{
  margin:0;
  color:#f7ecd3;
  font-size:1.06rem;
}

@media (max-width: 640px){
  .codex-grid,
  .keystone-grid{
    grid-template-columns:1fr;
  }
}