/* RLGN.CA — ghost-story section (homepage condition-monitoring chapter).
   Dark panel embedded in the cream page; sticky stage inside a 320vh track.
   Partner to js/ghost-section.js. No-JS / reduced-motion: beats read as
   stacked copy on the dark panel; canvas stays a quiet backdrop. */

.ghost-story { background: #16130e; color: #efe6d2; }
.gs-track { height: 320vh; position: relative; }
.gs-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }

.gs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.gs-kicker { position: absolute; top: 6vh; left: 6vw; z-index: 5;
             font-family: var(--f-mono); font-size: .72rem; letter-spacing: .22em;
             text-transform: uppercase; color: var(--red); }

.gs-rail { position: absolute; left: 6vw; bottom: 9vh; z-index: 5;
           width: min(46rem, 60vw); pointer-events: none; }
.gs-beat { position: absolute; left: 0; bottom: 0; opacity: 0; }
.gs-beat .bk { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .24em;
               text-transform: uppercase; color: var(--red); margin-bottom: .55rem; }
.gs-beat .bl { font-family: var(--f-display); font-weight: 600; color: #efe6d2;
               font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.06;
               text-shadow: 0 2px 24px rgba(22,19,14,.95), 0 0 10px rgba(22,19,14,.9); }
.gs-beat .bs { margin-top: .6rem; font-size: 1.05rem; color: #b3aa97; max-width: 40ch;
               text-shadow: 0 2px 18px rgba(22,19,14,.95); }

.gs-verdict { position: absolute; top: 7vh; left: 50%; transform: translateX(-50%);
              z-index: 5; text-align: center; opacity: 0; pointer-events: none;
              text-shadow: 0 2px 18px rgba(22,19,14,.95); }
.gs-verdict .vt { font-family: var(--f-mono); font-size: clamp(.95rem, 1.8vw, 1.3rem);
                  letter-spacing: .2em; color: var(--red); text-transform: uppercase; }
.gs-verdict .vs { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .14em;
                  color: #9c937f; margin-top: .5rem; text-transform: uppercase; }

.gs-close { position: absolute; inset: 0; display: grid; place-content: center;
            text-align: center; gap: 1.1rem; z-index: 5; opacity: 0; pointer-events: none; }
.gs-close .cl { font-family: var(--f-display); font-weight: 600; color: #efe6d2;
                font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.05;
                text-shadow: 0 3px 26px rgba(22,19,14,.95); }
.gs-close a { pointer-events: auto; display: inline-block; margin: 0 auto;
              font-family: var(--f-mono); font-size: .8rem; letter-spacing: .14em;
              text-transform: uppercase; color: #efe6d2; text-decoration: none;
              border: 1px solid var(--red); padding: .85rem 1.5rem; border-radius: 3px; }
.gs-close a:hover { background: var(--red); color: #fff; }

.gs-callouts { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.gs-callouts svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gs-callouts polyline { fill: none; stroke: #8f8674; stroke-width: 1; opacity: 0; }
.gs-callouts polyline.hot { stroke: var(--red); }
.gs-co { position: absolute; font-family: var(--f-mono); font-size: .8rem;
         letter-spacing: .12em; color: #ddd4c0; text-transform: uppercase;
         opacity: 0; white-space: nowrap; transform: translate(-2px, -100%);
         padding-bottom: 4px; text-shadow: 0 1px 12px rgba(22,19,14,.95); }
.gs-co small { display: block; font-size: .7rem; color: #a89f8d; letter-spacing: .1em;
               margin-top: 3px; }
.gs-co.hot { color: var(--red); }
.gs-co.hot small { color: #d98a95; }

/* ---- alarm-world HUD: the clock and the bill ---- */
.gs-hudline { position: absolute; top: 7vh; left: 50%; transform: translateX(-50%);
              z-index: 5; display: flex; gap: 3.5rem; opacity: 0; pointer-events: none;
              text-shadow: 0 2px 18px rgba(22,19,14,.95); }
.gs-clock, .gs-money { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .18em;
                       text-transform: uppercase; color: #9c937f; text-align: center; }
.gs-clock strong, .gs-money strong { display: block; font-size: clamp(1.5rem, 3vw, 2.4rem);
                       letter-spacing: .06em; margin-top: .35rem; font-weight: 500; }
.gs-clock strong { color: #efe6d2; }
.gs-money strong { color: var(--red); }

/* no-JS / reduced-motion: stack the copy, keep everything readable */
.ghost-story.gs-static .gs-track { height: auto; }
.ghost-story.gs-static .gs-stage { position: relative; height: auto;
                                   min-height: 60vh; padding: 12vh 0; }
.ghost-story.gs-static .gs-rail { position: relative; left: auto; bottom: auto;
                                  margin: 0 auto; padding: 0 6vw; width: auto;
                                  max-width: 52rem; }
.ghost-story.gs-static .gs-beat { position: static; opacity: 1; margin-bottom: 2.2rem; }
.ghost-story.gs-static .gs-verdict { position: static; transform: none; opacity: 1;
                                     margin: 0 auto 2.5rem; }
.ghost-story.gs-static .gs-close { position: static; opacity: 1; margin-top: 1rem; }
.ghost-story.gs-static .gs-canvas,
.ghost-story.gs-static .gs-callouts { display: none; }

@media (max-width: 640px) {
  .gs-rail { left: 7vw; right: 7vw; width: auto; }
  .gs-co { font-size: .68rem; }
}

/* ---- alarm-world site labels (coverage beat) ---- */
.gs-site { position: absolute; transform: translate(10px, -50%); z-index: 4;
           font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em;
           text-transform: uppercase; color: #cfc6b2; opacity: 0; white-space: nowrap;
           pointer-events: none; text-shadow: 0 1px 10px rgba(22,19,14,.95); }
.gs-site--base { color: var(--red); }
.ghost-story.gs-static .gs-sites { display: none; }