/* Page index rail (see /assets/pindex.js). It lives in the margin right of the text and never covers it:
   the text column is at most 1280px wide with 80px padding, so on wide screens it ends at 50% + 560px; the rail starts 14px past that. */
.pix{position:fixed;z-index:30;top:50%;left:calc(50% + 574px);transform:translateY(-50%);
  display:flex;flex-direction:column;gap:26px;padding:6px 0}
.pix.boot,.pix.boot *,.pix.boot *::before{transition:none!important}   /* first frame: already in its final state */
.pix .ln{position:absolute;left:11px;top:14px;bottom:14px;width:1px;margin-left:-.5px;background:rgba(255,255,255,.2)}
.pix .fl{position:absolute;inset:0;background:linear-gradient(180deg,#A3152A,#F2545B);transform-origin:top;transform:scaleY(0);transition:transform .6s cubic-bezier(.65,0,.25,1)}
.pix a{position:relative;display:flex;align-items:center;gap:10px;text-decoration:none;color:rgba(255,255,255,.5);transition:color .35s}
.pix .pt{position:relative;flex:none;display:grid;place-items:center;width:22px;height:22px}
.pix .pt::before{content:"";width:8px;height:8px;border-radius:50%;background:#2a1013;border:1px solid rgba(255,255,255,.55);transition:all .4s ease}
.pix a.done .pt::before{background:#A3152A;border-color:rgba(242,84,91,.7)}
.pix a.on{color:#fff}
.pix a.on .pt::before{width:12px;height:12px;background:#F2545B;border-color:#fff;box-shadow:0 0 12px 2px rgba(242,84,91,.8)}
.pix a:hover{color:#fff}
.pix a:focus-visible{outline:2px solid #F2545B;outline-offset:3px;border-radius:8px}
.pix span{font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1.2;white-space:nowrap}

/* narrower screens: the margin is too small for names, so the rail moves to the window edge and names show on hover, as a glass label to the left */
@media (max-width:1419px){
  .pix{left:auto;right:max(12px,calc((100vw - 1280px) / 2 + 24px))}
  .pix span{position:absolute;right:calc(100% + 6px);top:50%;transform:translate(6px,-50%);opacity:0;pointer-events:none;padding:7px 12px;border-radius:999px;
    font-size:12px;color:#fff;background:var(--lg-bg);-webkit-backdrop-filter:var(--lg-bf);backdrop-filter:var(--lg-bf);box-shadow:var(--lg-shadow);transition:opacity .3s ease,transform .4s ease}
  .pix a:hover span,.pix a:focus-visible span{opacity:1;transform:translate(0,-50%)}
}
@media (max-width:900px){.pix{display:none}}
@media (prefers-reduced-motion:reduce){.pix,.pix *,.pix *::before{transition:none!important}}

/* ---------- 2026-10-20 design study (html[data-rail], set by pindex.js from ?rail=) ---------- */
.pix .ct,.pix .pt em{display:none}

/* A · numbered glass capsule: the points become numbers inside one piece of glass; the current one sits on a red disc,
   the red fill runs down the inside of the capsule; names stay to the right (hover on narrow screens) */
html[data-rail="a"] .pix{gap:6px;padding:12px 8px;border-radius:999px;background:var(--lg-bg);-webkit-backdrop-filter:var(--lg-bf);backdrop-filter:var(--lg-bf);box-shadow:var(--lg-shadow)}
html[data-rail="a"] .pix .ln{left:50%;top:26px;bottom:26px;margin-left:-.5px;background:rgba(255,255,255,.08)}
html[data-rail="a"] .pix a{width:30px;justify-content:center}
html[data-rail="a"] .pix .pt{width:30px;height:30px;border-radius:50%;transition:background .4s ease,box-shadow .4s ease}
html[data-rail="a"] .pix .pt::before{display:none}
html[data-rail="a"] .pix .pt em{display:block;font:600 10.5px/1 Montserrat,system-ui,sans-serif;font-style:normal;letter-spacing:.04em;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums;transition:color .4s}
html[data-rail="a"] .pix a.done .pt em{color:rgba(242,84,91,.85)}
html[data-rail="a"] .pix a.on .pt{background:radial-gradient(120% 120% at 50% 0%,#8E1B2D,#6B1322 46%,#460B15);box-shadow:inset 0 0 0 1px rgba(255,196,201,.34),0 0 18px -2px rgba(242,84,91,.6)}
html[data-rail="a"] .pix a.on .pt em{color:#fff}
html[data-rail="a"] .pix a>span{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%)}
@media (min-width:1420px){html[data-rail="a"] .pix a:not(.on):not(:hover)>span{opacity:.55}}

/* B · ruler: each block is a short tick; the current one grows long and red, with its number and name; a 04 / 06 counter on top */
html[data-rail="b"] .pix{gap:18px}
html[data-rail="b"] .pix .ln{display:none}
html[data-rail="b"] .pix .ct{display:flex;align-items:baseline;gap:4px;margin:0 0 6px;font:700 22px/1 Geologica,Montserrat,sans-serif;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
html[data-rail="b"] .pix .ct i{font-style:normal;color:rgba(255,255,255,.3);font-weight:400}
html[data-rail="b"] .pix .ct{font-size:13px}html[data-rail="b"] .pix .ct b{font-size:26px;color:#F2545B}
html[data-rail="b"] .pix .pt{width:36px;height:12px;place-items:center start}
html[data-rail="b"] .pix .pt::before{width:14px;height:2px;border:0;border-radius:2px;background:rgba(255,255,255,.3);transition:width .5s cubic-bezier(.65,0,.25,1),background .4s,box-shadow .4s}
html[data-rail="b"] .pix a.done .pt::before{background:rgba(242,84,91,.6)}
html[data-rail="b"] .pix a.on .pt::before{width:36px;height:2px;background:#F2545B;border:0;box-shadow:0 0 12px rgba(242,84,91,.7)}
html[data-rail="b"] .pix a:hover .pt::before{width:24px}
html[data-rail="b"] .pix a.on:hover .pt::before{width:36px}
@media (min-width:1420px){html[data-rail="b"] .pix a:not(.on):not(:hover)>span{opacity:0;transform:translateX(-6px)}html[data-rail="b"] .pix a>span{transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),color .35s}}

/* C · index list: every block by number and name in small caps; the current one is white with a red bar, the rest stay quiet */
html[data-rail="c"] .pix{gap:14px}
html[data-rail="c"] .pix .ln{left:0;top:4px;bottom:4px;background:rgba(255,255,255,.1)}
html[data-rail="c"] .pix .fl{background:linear-gradient(180deg,#A3152A,#F2545B)}
html[data-rail="c"] .pix a{gap:0;padding-left:16px;min-height:18px}   /* on narrower screens the names show on hover only, so each row keeps its own height to hover */
html[data-rail="c"] .pix .pt{display:none}   /* 2026-10-20 (Nik): names only, no numbers */
html[data-rail="c"] .pix .pt::before{display:none}
html[data-rail="c"] .pix .pt em{display:none;font:600 10.5px/1 Montserrat,system-ui,sans-serif;font-style:normal;letter-spacing:.1em;color:rgba(255,255,255,.35);font-variant-numeric:tabular-nums;transition:color .4s}
html[data-rail="c"] .pix a.on .pt em,html[data-rail="c"] .pix a.done .pt em{color:#F2545B}
html[data-rail="c"] .pix span{font-size:11.5px;letter-spacing:.02em;font-weight:600}
html[data-rail="c"] .pix a{color:rgba(255,255,255,.4)}
html[data-rail="c"] .pix a.on{color:#fff}
/* one red marker on the line, carried by the end of the red fill: same start point, same duration, same curve, so the line never trails it */
.pix .mk{display:none}
html[data-rail="c"] .pix .mk{display:block;position:absolute;left:-1px;top:-9px;width:3px;height:18px;border-radius:2px;background:#F2545B;box-shadow:0 0 10px rgba(242,84,91,.8);
  transition:transform .6s cubic-bezier(.65,0,.25,1);will-change:transform}
html[data-rail="c"] .pix .fl{transition:transform .6s cubic-bezier(.65,0,.25,1)}