/* ============================================================
   The Lighthouse — The Rites (holder actions)
   ============================================================ */
.rites { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-4); align-items: start; }
@media (max-width: 940px) { .rites { grid-template-columns: 1fr; } }

.ritescol { display: flex; flex-direction: column; gap: 1.3rem; }
.rblock { padding: 1.4rem 1.5rem 1.6rem; }
.rblock h3 { font-size: 1.05rem; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.35rem; }
.rblock p.dim { font-size: var(--t-small); line-height: 1.5; margin-bottom: 1rem; }
.rrow { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

.rin { background: var(--deepest); border: 1px solid var(--hair); border-radius: var(--r-md); color: var(--foam);
  font-family: var(--font-mono); font-size: 0.95rem; padding: 0.7rem 0.9rem; flex: 1; min-width: 0; letter-spacing: 0.06em; }
.rin--sm { flex: none; width: 92px; text-align: center; }
.rin:focus { outline: none; border-color: var(--signal); }

.ipick { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.7rem 0 0.2rem; }
.ipick > .label { width: 100%; margin-bottom: 0.1rem; }
.ichip { background: var(--glass); border: 1px solid var(--hair); color: var(--dim); border-radius: var(--r-pill);
  padding: 0.4em 0.9em; font-size: 0.78rem; cursor: pointer; transition: color var(--fast), border-color var(--fast), background var(--fast);
  font-family: var(--font-mono); letter-spacing: 0.04em; }
.ichip:hover { color: var(--foam); border-color: var(--hair-strong); }
.ichip.is-on { background: var(--light-haze); border-color: var(--signal); color: var(--light); }

.rhint { font-size: var(--t-micro); color: var(--dimmer); line-height: 1.5; margin-top: 0.7rem; }
.rhint b { color: var(--dim); font-weight: 600; }

.rstate { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin: 0.2rem 0 0.4rem; }
.rstate > div { background: var(--deepest); border: 1px solid var(--hair-soft); border-radius: var(--r-md); padding: 0.65rem 0.85rem; }
.rstate span { display: block; font-size: var(--t-micro); color: var(--dimmer); text-transform: uppercase; letter-spacing: 0.12em; }
.rstate strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--foam); }

.rites__stage { position: sticky; top: 90px; }
.rites__art { aspect-ratio: 3 / 4.2; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--hair);
  background: linear-gradient(160deg, #0e1c30, #070f1b); box-shadow: var(--lift-2); }
.rites__art .lh-svg { width: 100%; height: 100%; display: block; }
.rites__cap { margin-top: 0.9rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.rites__cap .rid { font-family: var(--font-mono); color: var(--dim); font-size: 0.9rem; }
.rites__cap .rorder { font-family: var(--font-display); color: var(--light); font-size: 1.2rem; }
.rwarn { color: var(--signal); font-size: var(--t-micro); letter-spacing: 0.03em; margin-top: 0.7rem; line-height: 1.5; }

.act-line { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.act-sub { color: var(--dim); font-size: var(--t-small); }
.act-sub b { color: var(--light); }

/* the five orders reel */
.forms { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); }
@media (max-width: 880px) { .forms { grid-template-columns: 1fr 1fr; } }
.fcard { padding: 1.3rem 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.fcard .fstage { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--dimmer); letter-spacing: 0.14em; text-transform: uppercase; }
.fcard h4 { font-family: var(--font-display); font-size: 1.3rem; margin: 0.3rem 0 0.4rem; color: var(--light); line-height: 1; }
.fcard p { color: var(--dim); font-size: var(--t-small); line-height: 1.5; }
.fcard.is-final { border-color: var(--signal-dim); }
.fcard.is-final h4 { color: var(--foam); }

/* mechanics */
.mech { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
@media (max-width: 700px) { .mech { grid-template-columns: 1fr; } }
.mcard { padding: 1.5rem; }
.mcard .mnum { font-family: var(--font-mono); color: var(--signal); font-size: 0.78rem; letter-spacing: 0.1em; }
.mcard h4 { font-size: 1.1rem; margin: 0.35rem 0 0.5rem; display: flex; align-items: center; gap: 0.6rem; }
.mcard p { color: var(--dim); font-size: var(--t-small); line-height: 1.55; }
.rpts { font-family: var(--font-mono); font-size: 0.68rem; color: var(--light); background: var(--light-haze);
  border: 1px solid var(--signal-haze); border-radius: var(--r-pill); padding: 0.2em 0.7em; white-space: nowrap; }

/* traits explained */
.traitlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem 1.6rem; }
@media (max-width: 760px) { .traitlist { grid-template-columns: 1fr 1fr; } }
.traitlist div { border-top: 1px solid var(--hair-soft); padding-top: 0.7rem; }
.traitlist strong { display: block; color: var(--foam); font-size: var(--t-small); margin-bottom: 0.15rem; }
.traitlist span { color: var(--dimmer); font-size: var(--t-micro); line-height: 1.5; }