/* The Grey Swan: still side rails with the page scrolling between them (every page except the homepage,
   which has its own). Each page sets its look in a small GS_SCROLL block; see assets/scroll.js. */

/* The darker surround and the centre "sheet" the page sits on */
html.gs-rails { background: #0B0C0E; }
html.gs-rails body { background: transparent; }
.gs-sheet { position: fixed; top: 0; bottom: 0; left: 50%; width: var(--gs-width, 1180px); transform: translateX(-50%);
            background: #111315; border-left: 1px solid #2E2A24; border-right: 1px solid #2E2A24;
            box-shadow: 0 0 80px rgba(0, 0, 0, 0.6); z-index: -1; pointer-events: none; display: none; }
.gs-glow { position: fixed; inset: 0; z-index: -2; pointer-events: none; display: none;
           background: radial-gradient(ellipse 50% 60% at 0% 50%, rgba(198, 159, 112, 0.07), transparent 70%),
                       radial-gradient(ellipse 50% 60% at 100% 50%, rgba(198, 159, 112, 0.07), transparent 70%); }
html.gs-rails .gs-sheet, html.gs-rails .gs-glow { display: block; }
/* Full-width header and footer lines stop at the sheet's edges */
html.gs-rails body > header, html.gs-rails body > footer { max-width: var(--gs-width, 1180px); margin-left: auto; margin-right: auto; }

.gs-rail { position: fixed; top: 0; bottom: 0; width: calc((100vw - var(--gs-width, 1180px)) / 2); z-index: 5;
           display: none; align-items: center; justify-content: center; pointer-events: none;
           font-family: 'IBM Plex Sans', system-ui, sans-serif; }
html.gs-rails .gs-rail { display: flex; }
.gs-rail-left { left: 0; }
.gs-rail-right { right: 0; }
.gs-line { position: absolute; top: 12vh; bottom: 12vh; left: 50%; width: 1px;
           background: linear-gradient(to bottom, transparent, rgba(198, 159, 112, 0.45), transparent); }
.gs-progress { position: absolute; left: 50%; top: 12vh; width: 1px; height: 0; background: #E2B885; }
.gs-mark { position: absolute; width: 12px; height: 12px; left: calc(50% - 6px); fill: #C69F70; }
.gs-mark.top { top: calc(12vh - 6px); } .gs-mark.bottom { bottom: calc(12vh - 6px); }

/* Left rail: the drifting motif behind the vertical title */
.gs-motif { position: absolute; top: 12vh; bottom: 12vh; left: 0; right: 0; overflow: hidden;
            -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
.gs-motif-track { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.gs-motif-item { position: absolute; left: 0; right: 0; text-align: center; color: rgba(198, 159, 112, 0.42);
                 font-size: 0.7rem; letter-spacing: 1px; white-space: nowrap; transition: color .4s; }
.gs-motif-item.near { color: #E2B885; }
.gs-title { position: relative; writing-mode: vertical-rl; transform: rotate(180deg);
            font-family: 'Cinzel', Georgia, serif; color: #C69F70; letter-spacing: 7px; font-size: 0.74rem;
            text-transform: uppercase; background: #0B0C0E; padding: 16px 0; opacity: 0.9; }

/* Motif styles per tool */
.gs-motif.lines .gs-motif-item { text-align: right; padding-right: calc(50% + 12px); font-variant-numeric: tabular-nums; }
.gs-motif.lines::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% + 6px); width: 1px;
                         background: rgba(232, 144, 127, 0.28); }       /* the red margin rule of a manuscript */
.gs-motif.cites .gs-motif-item { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.95rem; }
.gs-motif.cites .gs-motif-item:nth-child(odd) { text-align: right; padding-right: calc(50% + 16px); }
.gs-motif.cites .gs-motif-item:nth-child(even) { text-align: left; padding-left: calc(50% + 16px); }
.gs-motif.dates .gs-motif-item { text-align: left; padding-left: calc(50% + 12px); font-size: 0.66rem; text-transform: uppercase; }
.gs-motif.dates .gs-motif-item::before { content: ""; position: absolute; left: calc(50% - 3px); top: 50%; width: 5px; height: 5px;
                                         margin-top: -2.5px; border-radius: 50%; background: rgba(198, 159, 112, 0.6); }
.gs-motif.dates .gs-motif-item.today { color: #E2B885; }
.gs-motif.dates .gs-motif-item.today::before { background: #E2B885; box-shadow: 0 0 10px rgba(226, 184, 133, 0.8); }

/* Right rail: section diamonds */
.gs-nav { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; pointer-events: auto; }
.gs-nav button { display: flex; align-items: center; justify-content: center; position: relative; width: 18px; height: 18px;
                 background: none; border: 0; padding: 0; cursor: pointer; }
.gs-nav button::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid #C69F70;
                         background: #0B0C0E; transition: all .3s; }
.gs-nav button.active::before { background: #E2B885; box-shadow: 0 0 12px rgba(226, 184, 133, 0.7); width: 10px; height: 10px; }
.gs-nav span { position: absolute; right: 26px; white-space: nowrap; font-size: 0.78rem; color: #A9A49B;
               opacity: 0; transform: translateX(6px); transition: all .25s; pointer-events: none; }
.gs-nav button:hover span, .gs-nav button:focus-visible span, .gs-nav button.active span { opacity: 1; transform: none; }
.gs-nav button.active span { color: #C69F70; }

/* Right rail: the live readout at the bottom (verdicts, references checked, reviewer counts) */
.gs-readout { position: absolute; bottom: calc(12vh + 22px); left: 0; right: 0; display: flex; flex-direction: column;
              align-items: center; gap: 6px; text-align: center; pointer-events: none; }
.gs-readout[hidden] { display: none; }
.gs-readout b { font: 500 1.7rem/1 'Cormorant Garamond', Georgia, serif; color: #C69F70; display: block; }
.gs-readout small { color: #A9A49B; font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase; line-height: 1.3; display: block; max-width: 80px; }
.gs-pips { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.gs-pip { width: 6px; height: 6px; border-radius: 50%; }
.gs-pip.must { background: #E8907F; } .gs-pip.should { background: #E0B86A; } .gs-pip.advisory { background: #8FB3D9; }
.gs-pip.ok { background: #8FC79A; } .gs-pip.info { background: #8C8880; }
.gs-meter { width: 3px; height: 90px; background: #2E2A24; border-radius: 2px; position: relative; overflow: hidden; }
.gs-meter i { position: absolute; left: 0; right: 0; bottom: 0; background: #E2B885; transition: height .4s ease; }

/* Fade-up as things scroll into view */
.gs-js .gs-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.gs-js .gs-reveal.gs-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .gs-js .gs-reveal { opacity: 1; transform: none; transition: none; }
  .gs-motif-track { transform: none !important; }
  .gs-dot.busy { animation: none; }
}