/* Extracted verbatim from shared/ephemeris.css (+ the incense cursor

   from the home stylesheet) for The Crossing. Token bridge at the

   bottom maps the old names onto the blend palette. */


/* ── Rail ─────────────────────────────────────────────────── */
.rail {
  position:fixed; left:0; top:50%; transform:translateY(-50%);
  width:var(--rail-w); padding-left:clamp(.9rem,2vw,1.6rem);
  z-index:5; pointer-events:none;
  opacity:1; transition:opacity .4s ease, transform .4s ease;
}

.rail.is-set { opacity:0; transform:translateY(-50%) translateX(-1rem); }

.moon {
  all:unset; display:block; position:relative; width:24px; height:24px; border-radius:50%;
  border:1px solid var(--gilt); overflow:hidden; margin:0 0 1rem .7rem; background:var(--gilt);
  cursor:pointer; pointer-events:auto; transition:box-shadow .2s ease, border-color .2s ease;
}

.moon:hover, .moon:focus-visible { border-color:var(--violet); box-shadow:0 0 0 5px color-mix(in srgb, var(--violet) 16%, transparent); }

.moon:focus-visible { outline:2px solid var(--wine); outline-offset:4px; }

.moon-shadow { position:absolute; inset:0; background:var(--parchment); transform:translateX(calc(var(--p,0) * 100%)); transition:background .35s; }

.rail-scale { position:relative; height:38vh; border-left:1px solid var(--hair); padding-left:.65rem; }

.rail-tick {
  position:absolute; top:calc(var(--at)*100%); transform:translateY(-50%); z-index:2;
  font-family:var(--sub); font-size:var(--sent-sm); letter-spacing:.1em;
  color:var(--muted); font-variant-numeric:tabular-nums;
  opacity:calc(.55 + var(--near,0) * .45);
  text-shadow:0 0 calc(var(--near,0) * 5px) color-mix(in srgb, var(--violet) 65%, transparent);
  transition:color .3s ease, opacity .3s ease;
}

.rail-decan {
  position:absolute; top:calc(var(--at)*100%); transform:translateY(-50%); left:-.42rem; z-index:2;
  font-family:var(--sub); font-size:.5rem; letter-spacing:.06em; text-decoration:none;
  color:var(--gilt); background:var(--parchment); padding:.15rem .3rem;
  opacity:calc(.65 + var(--near,0) * .35); pointer-events:auto; cursor:pointer;
  transition:background .35s, opacity .3s ease, color .18s ease;
}

.rail-decan:hover, .rail-decan:focus-visible { color:var(--violet); }

.rail-decan::after {
  content:attr(data-tip); position:absolute; left:1.5rem; top:50%; transform:translateY(-50%) translateX(-.25rem);
  font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  background:var(--ink); color:var(--parchment); padding:.35rem .6rem;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}

.rail-decan:hover::after, .rail-decan:focus-visible::after { opacity:1; transform:translateY(-50%) translateX(0); }

.rail-progress { position:absolute; left:-1px; top:0; width:2px; height:calc(var(--p,0)*100%); background:var(--gilt); z-index:1; }

.rail-meta {
  all:unset; display:block; cursor:pointer; pointer-events:auto;
  margin:1.3rem 0 0; padding-left:.65rem; font-family:var(--sub); font-size:var(--caps-xxs);
  line-height:2.3; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  transition:color .2s ease;
}

.rail-meta:hover, .rail-meta:focus-visible { color:var(--violet); }

.rail-meta:focus-visible { outline:2px solid var(--wine); outline-offset:4px; border-radius:4px; }

/* ── Ephemeris panel ─────────────────────────────────────────
   Live sky positions. Real technique: sun/moon ecliptic
   longitude, plotted on an actual 12-sign wheel.            */
.ephemeris-panel {
  position:fixed; left:calc(var(--rail-w) + clamp(.9rem,2vw,1.6rem) + 1.2rem); top:50%; width:19rem;
  max-height:calc(100vh - 3rem); overflow-y:auto;
  transform:translateY(-50%) translateX(-.4rem) scale(.97);
  background:var(--panel); border:1px solid var(--hair); text-align:left;
  padding:1.3rem 1.4rem 1.5rem; z-index:25;
  visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s, background .35s, border-color .35s;
  box-shadow:0 20px 44px -16px color-mix(in srgb, var(--ink) 34%, transparent);
}

.ephemeris-panel.is-open {
  visibility:visible; opacity:1; pointer-events:auto;
  transform:translateY(-50%) translateX(0) scale(1);
  transition:opacity .22s ease, transform .22s ease, background .35s, border-color .35s;
}

.ephemeris-panel.is-marquee {
  left:50%; top:7rem;
  transform:translateX(-50%) translateY(-.4rem) scale(.97);
}

.ephemeris-panel.is-marquee.is-open {
  transform:translateX(-50%) translateY(0) scale(1);
}

.eph-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }

.eph-title { font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0; }

.eph-close { all:unset; cursor:pointer; width:1.5rem; height:1.5rem; display:grid; place-items:center; color:var(--muted); font-size:1.1rem; line-height:1; border-radius:50%; }

.eph-close:hover, .eph-close:focus-visible { color:var(--violet); background:color-mix(in srgb, var(--violet) 12%, transparent); }

.eph-close:focus-visible { outline:2px solid var(--wine); outline-offset:2px; }

.eph-wheel { display:block; width:100%; max-width:11rem; margin:0 auto .9rem; }

.eph-ring { fill:none; stroke:var(--hair); stroke-width:1; }

.eph-sign-glyph { font-size:11px; fill:var(--dusk); text-anchor:middle; dominant-baseline:central; }

.eph-sun-line, .eph-moon-line { stroke-width:1; }

.eph-sun-line { stroke:color-mix(in srgb, var(--violet) 55%, transparent); }

.eph-moon-line { stroke:color-mix(in srgb, var(--gilt) 55%, transparent); }

.eph-sun-mark, .eph-moon-mark { font-size:13px; text-anchor:middle; dominant-baseline:central; }

.eph-sun-mark { fill:var(--violet); }

.eph-moon-mark { fill:var(--gilt); }

.eph-stats { margin:0; }

.eph-stats > div { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.55rem 0; border-bottom:1px dotted var(--hair); }

.eph-stats > div:last-child { border-bottom:0; }

.eph-stats dt { font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0; }

.eph-stats dd { font-family:var(--sub); font-size:var(--sent-sm); letter-spacing:.04em; color:var(--ink); margin:0; text-align:right; }

.eph-note { font-family:var(--sub); font-size:var(--sent-sm); letter-spacing:.02em; color:var(--muted); line-height:1.5; margin:1rem 0 0; opacity:.8; }


/* ═══════════════════════════════════════════════════════════════════
   ADAPTIVE RAIL v1 — canonical, shared by every page
   The rail is fixed while bands of different luminance slide past it,
   so at any moment it may sit over paper, over a dark full-bleed band,
   or straddling the seam between them. Two mechanisms:

   1. Each discrete mark hit-tests its own midpoint and flips on its own
      via .on-dark, so the top of the rail can stay dark while the
      bottom goes light.
   2. The hairline and its progress fill can't be one colour or the
      other, so each carries a light twin painted through --lum-mask,
      a gradient rebuilt per frame in that element's own pixel space.

   Colours come from the page palette (--rail-lit defaults to --lilac),
   so purple pages stay purple and the Lilith page stays bone.
   Opt any section in on any page with data-lum="dark".
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --rail-lit: var(--lilac);
  --rail-lit-soft: color-mix(in srgb, var(--lilac) 60%, transparent);
}

/* ── Decan markers ───────────────────────────────────────────────────
   Previously a parchment-filled chip, which read as a stray box wherever
   the band behind it wasn't exactly parchment. Now a hollow node sitting
   on the scale with the numeral beside it: no fill, so nothing can box,
   and the node states carry real meaning — hollow for a section you
   haven't reached, filled for the one you're in. */
.rail-decan {
  position:absolute; top:calc(var(--at)*100%); transform:translateY(-50%);
  left:0; z-index:2; display:block; background:none;
  padding:.2rem .2rem .2rem .68rem;
  font-family:var(--sub); font-size:.6rem; letter-spacing:.11em;
  text-decoration:none; color:var(--gilt);
  opacity:calc(.85 + var(--near,0) * .15);
  transition:color .2s ease, opacity .3s ease;
}

.rail-decan::before {
  content:''; position:absolute; left:-1px; top:50%;
  transform:translate(-50%,-50%);
  width:.5rem; height:.5rem; border-radius:50%;
  background:transparent; border:1.6px solid currentColor;
  transition:background .25s ease, transform .25s ease;
}

.rail-decan:hover::before,
.rail-decan:focus-visible::before,
.rail-decan.is-here::before {
  background:currentColor; transform:translate(-50%,-50%) scale(1.22);
}

.rail-decan.is-here { opacity:1; color:var(--violet); }

.rail-decan.is-here.on-dark { color:var(--rail-lit); }

/* ── Light twins for the continuous line and its fill ────────────── */
.rail-scale, .rail-progress { position:relative; }

.rail-scale::before {
  content:''; position:absolute; left:-1px; top:0; width:1px; height:100%;
  background:var(--rail-lit-soft); pointer-events:none; z-index:0;
  -webkit-mask-image:var(--lum-mask, linear-gradient(transparent,transparent));
          mask-image:var(--lum-mask, linear-gradient(transparent,transparent));
}

.rail-progress::before {
  content:''; position:absolute; inset:0; background:var(--rail-lit);
  pointer-events:none;
  -webkit-mask-image:var(--lum-mask, linear-gradient(transparent,transparent));
          mask-image:var(--lum-mask, linear-gradient(transparent,transparent));
}

/* ── Flipped states ──────────────────────────────────────────────── */
.rail-tick.on-dark { color:var(--rail-lit); }

.rail-decan.on-dark { color:var(--rail-lit); }

.rail-meta.on-dark { color:var(--rail-lit-soft); }

.moon.on-dark { border-color:var(--rail-lit); background:var(--rail-lit); }

.moon.on-dark .moon-shadow { background:#0d0b0a; }

.moon.on-dark:hover, .moon.on-dark:focus-visible {
  border-color:var(--rail-lit);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--rail-lit) 20%, transparent);
}

.rail-decan.on-dark::after {
  background:var(--rail-lit); color:#14100e;
}



/* ── incense cursor + smoke canvas (from The Red Thread's home) ── */
.incense-smoke {
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:34;
  filter:blur(5.5px);
}
:root {
  --cursor-incense:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Cline x1='5' y1='35' x2='26' y2='10' stroke='%23000' stroke-opacity='.16' stroke-width='4.4' stroke-linecap='round'/%3E%3Cline x1='5' y1='35' x2='26' y2='10' stroke='%235b4636' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='21' y1='16' x2='25.5' y2='10.5' stroke='%23c9c2b6' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='27' cy='8.6' r='5' fill='%23ff7a2f' opacity='.3'/%3E%3Ccircle cx='27' cy='8.6' r='2.4' fill='%23ff9440'/%3E%3Ccircle cx='27' cy='8.6' r='1.1' fill='%23ffd9a0'/%3E%3C/svg%3E") 27 9;
}
html[data-sect="nocturnal"] body { cursor:var(--cursor-incense), auto; }
html[data-sect="nocturnal"] a, html[data-sect="nocturnal"] button,
html[data-sect="nocturnal"] summary, html[data-sect="nocturnal"] [role="button"],
html[data-sect="nocturnal"] .rail-decan { cursor:var(--cursor-incense), pointer; }
@media (prefers-reduced-motion:reduce) { .incense-smoke { display:none; } }

/* ── token bridge: the old rail speaks the blend's colours ── */
:root {
  --rail-w:7rem;
  --sent-sm:clamp(.6rem, .57rem + .1vw, .65rem);
  --sub:var(--caps);
}
html[data-sect="diurnal"], html[data-sect="nocturnal"] {
  --violet:var(--accent-text); --lilac:var(--glow);
  --muted:var(--dim); --stone:var(--dim);
  --dusk:var(--accent-text); --wine:var(--accent);
  --gilt:var(--door); --parchment:var(--sky-c);
  --rail-lit:var(--glow);
  --rail-lit-soft:color-mix(in srgb, var(--glow) 60%, transparent);
}
/* the crossing's ground is dark at night; the rail should read it */
html[data-sect="nocturnal"] .moon-shadow { background:#0d0b0a; }

/* the rail steps aside on narrow viewports, as on the old site */
@media (max-width:1180px) { .rail { display:none; } .ephemeris-panel { left:1rem; } }

/* the adaptive block's `position:relative` on .rail-progress (for its
   light twin) collapses the inline span here; pin the fill back down */
.rail-scale .rail-progress { position:absolute; display:block; }

/* ═══ THE SITE'S DAY ═══ diurnal runs cool: white sands under an
   amethyst sky. These are the canonical day tokens for every page of
   The Crossing; new pages inherit them by linking this sheet. The home
   page overrides them inline on purpose (its desert hero is the one
   deliberately warm place), and a page's own inline tokens always win,
   so keep new pages' inline diurnal blocks matched to these values. */
html[data-sect="diurnal"] {
  --room-a:#F7F4FA; --room-b:#F1EDF7; --room-c:#E4DDF0;
  --gate-plaster:#F4F1F9;
  --panel:rgba(255,255,255,.86); --panel-line:#D8CFE8; --hair:#D8CFE8;
  --sky-a:#C9BEE8; --sky-b:#DFD7EF; --sky-c:#F1EDF7;
}

/* ═══ PRAISE ═══ a testimonial placed from the Studio, dressed for
   both sects: her quote face over a whisper of gold. ═══ */
.testimonial { margin:2.2rem auto; max-width:34rem;
  padding:1.35rem 1.6rem 1.15rem; border-left:2px solid var(--door);
  background:color-mix(in srgb, var(--door-light) 8%, transparent);
  border-radius:0 14px 14px 0; }
.testimonial blockquote { margin:0 0 .65rem; font-family:var(--quote);
  font-style:italic; font-size:1.08rem; line-height:1.55;
  color:var(--body-ink); }
.testimonial blockquote::before { content:'\201C'; display:block;
  font-family:var(--display); font-size:2.1rem; line-height:.55;
  color:var(--door); margin-bottom:.4rem; }
.testimonial figcaption { font-family:var(--caps); font-size:var(--caps-xxs);
  letter-spacing:.2em; text-transform:uppercase; color:var(--door-text); }