/* ═══════════════════════════════════════════════════════════
   Decorative technology rails - two 2cm columns at the page
   edges, icons drifting top -> bottom in light gray.
   Fully self-contained: delete this file and the `icon_rails`
   front-matter flag to roll back.
   ═══════════════════════════════════════════════════════════ */
:root{
  --rail-w:2.4cm;               /* wide enough for a 60px icon */
  --rail-inset:2cm;             /* gap between page edge and rail */
  --rail-ink:#DCD7C7;           /* light gray on the cream ground */
  --rail-size:60px;              /* doubled */
  --rail-gap:88px;               /* scaled with the icons */
  --rail-speed-l:52s;
  --rail-speed-r:66s;           /* different speeds so the two sides don't lock step */
}
[data-theme="dark"]{
  --rail-ink:rgba(134,174,218,.55);   /* light blue in dark mode */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --rail-ink:rgba(134,174,218,.55);
}}

.rail-sprite{position:absolute;width:0;height:0;overflow:hidden}

.rail{position:fixed;top:0;bottom:0;width:var(--rail-w);
  overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent)}
.rail-left{left:var(--rail-inset)}
.rail-right{right:var(--rail-inset)}

.rail-track{display:flex;flex-direction:column;align-items:center;gap:var(--rail-gap);
  margin:0;padding:var(--rail-gap) 0;list-style:none;
  will-change:transform;animation:rail-drift var(--rail-speed-l) linear infinite}
.rail-right .rail-track{animation-duration:var(--rail-speed-r)}

.rail-item{display:flex;align-items:center;justify-content:center}
.ri{width:var(--rail-size);height:var(--rail-size);
  fill:var(--rail-ink);color:var(--rail-ink);
  transition:fill .22s ease}

/* the track holds two identical copies, so -50% -> 0 wraps seamlessly */
@keyframes rail-drift{
  from{transform:translate3d(0,-50%,0)}
  to{transform:translate3d(0,0,0)}
}

/* content sits above the rails */
.page{position:relative;z-index:1}
.theme-btn{z-index:80}

/* only show them when there is genuinely room beside the 1020px column */
@media (max-width:1450px){.rail{display:none}}

@media (prefers-reduced-motion:reduce){
  .rail-track{animation:none;transform:translate3d(0,-25%,0)}
}