/* A single outer rail boundary; the centred content needs no extra border. */
main{border-left:0;border-right:0}
.rail-right .rail-brand{top:154px}
.rail-right .menu-toggle{width:44px;height:44px;left:50%;top:20px;transform:translateX(-50%);padding:10px;display:grid;place-items:center;border-radius:50%;transition:background-color .25s,color .25s}
.menu-icon{display:block;width:24px;height:24px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.menu-toggle:hover{background:var(--orange)}
.menu-open .menu-icon{transform:rotate(45deg)}
@media(max-width:700px){.rail-right .rail-brand{top:18px}.rail-right .menu-toggle{left:auto;right:10px;top:7px;transform:none}}
@media(prefers-reduced-motion:reduce){.menu-icon,.rail-right .menu-toggle{transition:none}}

/* Reserve the expanded rail footprint so hover never covers page content. */
@media(min-width:701px){
 :root{--work-closed:84px;--work-open:120px}
 .rail-left.work-rail{width:var(--work-closed);--preview-size:var(--work-open);border-right:0}
 .rail-left.work-rail::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:1px;background:var(--line);pointer-events:none}
 .rail-left.work-rail:is(:hover,:focus-within){width:var(--work-open)}
 main{margin-left:max(var(--work-open),calc((100% - 1560px)/2));margin-right:var(--rail);max-width:1560px}
 .menu{left:var(--work-open)}
 .work-rail-tile:nth-child(4){width:var(--work-closed)}
 .work-rail-tile:nth-child(4) img{transform:translateX(calc(var(--work-closed) - var(--work-open)))}
 .work-rail:is(:hover,:focus-within) .work-rail-tile{width:var(--work-open)}
 .work-rail:is(:hover,:focus-within) .work-rail-tile img{transform:translateX(0)}
}
@media(min-width:701px) and (max-width:1050px){:root{--work-closed:64px;--work-open:104px}}

/* Pixel steps soften only the top of the expanded green rail. */
.work-rail-link::before{content:"";position:absolute;top:0;left:0;width:100%;height:5vh;background:url('/assets/work-rail/pixel-fade.svg?v=2') center/100% 100% no-repeat;opacity:0;pointer-events:none;transition:opacity .35s}
.work-rail:is(:hover,:focus-within) .work-rail-link::before{opacity:1}
@media(prefers-reduced-motion:reduce){.work-rail-link::before{transition:none}}