/*
 * Orymera signature system — reusable primitives.
 * See Style Guide §03. Three layers: editorial lockup (base) · ephemeris ruler
 * (signature) · the coordinate readout. Loaded globally after shell.css.
 *
 * Default styling targets the light paper ground. On a dark ground (night hero
 * / result page) add the --on-night modifier to the block, e.g.
 *   <div class="orymera-lockup orymera-lockup--on-night"> … </div>
 *
 * USAGE — editorial lockup:
 *   <div class="orymera-lockup">
 *     <p class="orymera-lockup__label">Astrology · Planetary Timing</p>
 *     <h2 class="orymera-lockup__title">Your <em>Saturn Return</em>, to the degree.</h2>
 *     <span class="orymera-lockup__hair" aria-hidden="true"></span>
 *   </div>
 *
 * USAGE — ephemeris ruler (mark position via --orymera-mark, 0%–100%):
 *   <div class="orymera-ruler" style="--orymera-mark:62%"><span class="orymera-ruler__mark"></span></div>
 *
 * USAGE — coordinate readout (feed REAL computed values only; never a placeholder):
 *   <span class="orymera-coord">♄ 287°14′ · CAP · 2R</span>
 */

/* ---- Editorial lockup (The Threshold) ---- */
.orymera-lockup { display: flex; flex-direction: column; align-items: flex-start; }
.orymera-lockup__label { margin: 0; font-family: var(--orymera-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; color: var(--orymera-accent); }
.orymera-lockup__title { margin: 20px 0 0; font: 400 clamp(30px, 4.6vw, 48px)/1.02 var(--orymera-display); letter-spacing: -.02em; color: var(--orymera-ink); text-wrap: pretty; }
.orymera-lockup__title em { font-style: italic; font-weight: 500; color: var(--orymera-plum); }
.orymera-lockup__hair { display: block; width: 60px; height: 1px; margin: 24px 0 0; background: var(--orymera-accent); }

/* ---- Coordinate readout ---- */
.orymera-coord { font-family: var(--orymera-mono); font-size: 12px; letter-spacing: .06em; color: var(--orymera-muted); font-variant-numeric: tabular-nums; }

/* ---- Ephemeris ruler ---- */
.orymera-ruler { position: relative; height: 15px; border-top: 1px solid rgb(37 20 43 / 26%); }
.orymera-ruler::before { content: ""; position: absolute; inset: 0 0 auto; height: 15px; background-image: repeating-linear-gradient(90deg, rgb(37 20 43 / 26%) 0 1px, transparent 1px 22px); -webkit-mask: linear-gradient(180deg, #000 0 42%, transparent 42%); mask: linear-gradient(180deg, #000 0 42%, transparent 42%); }
.orymera-ruler__mark { position: absolute; top: 0; left: var(--orymera-mark, 50%); width: 1px; height: 15px; background: var(--orymera-accent); }

/* ---- On-night modifiers (dark ground: hero, result page) ---- */
.orymera-lockup--on-night .orymera-lockup__title { color: #f6eee7; }
.orymera-lockup--on-night .orymera-lockup__title em { color: var(--orymera-mauve); }
.orymera-coord--on-night { color: var(--orymera-paper-on-night); }
.orymera-ruler--on-night { border-top-color: rgb(232 219 210 / 30%); }
.orymera-ruler--on-night::before { background-image: repeating-linear-gradient(90deg, rgb(232 219 210 / 30%) 0 1px, transparent 1px 22px); }

@media (prefers-reduced-motion: reduce) {
    .orymera-ruler, .orymera-lockup__hair { transition: none; }
}