/* About: "On site" pinned scroll gallery (js/rcl-onsite.js).
   Base rules are the no-JS / reduced-motion fallback: stacked panels.
   .lk-site.is-live is the pinned version; the script owns its transforms. */
.lk-site{--site-gut:clamp(20px,4vw,64px);--site-top:calc(var(--rcl-header-h,100px) + clamp(18px,3vh,36px));position:relative;padding:0;background:var(--lk-void);color:#eaf6fc;overflow:clip}
.lk-site__head{padding:var(--lk-pad-y) var(--site-gut) clamp(40px,6vw,88px);text-align:center}
.lk-site__head .lk-index{display:inline-block;margin:0 0 clamp(14px,2vh,24px)}
.lk-site__title{margin:0;font-family:var(--rcl-font-tech);font-weight:600;font-size:clamp(2.6rem,1rem + 7vw,8.6rem);line-height:.92;letter-spacing:.005em;text-transform:uppercase;color:#fff;text-wrap:balance}
.lk-site__slides{margin:0;padding:0;list-style:none}
.lk-site__slide{position:relative;min-height:min(86vh,760px);display:grid;align-content:end;padding:var(--site-gut);overflow:hidden}
.lk-site__slide+.lk-site__slide{margin-top:2px}
.lk-site__img{position:absolute;inset:0;overflow:hidden}
/* The navy colour grade is baked into the photographs (WebP), so nothing is
   filtered or blended per frame while they zoom. ::after shades the text side. */
.lk-site__img img{width:100%;height:100%;object-fit:cover}
.lk-site__img:after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(6,12,18,.82) 0,rgba(6,12,18,0) 30%),linear-gradient(0deg,rgba(6,12,18,.9) 0,rgba(6,12,18,0) 45%),radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(6,12,18,.55))}
.lk-site__name{position:relative;margin-bottom:clamp(18px,3vh,36px)}
.lk-site__no{margin:0 0 10px;font-family:var(--rcl-font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.lk-site__no i{display:inline-block;width:7px;height:7px;margin-right:10px;vertical-align:1px;border-radius:50%;background:var(--lk-led);box-shadow:0 0 0 3px var(--lk-led-soft)}
.lk-site__no span{color:var(--rcl-text-faint)}
.lk-site__h{margin:0;font-family:var(--rcl-font-tech);font-weight:600;font-size:clamp(2.8rem,1rem + 8vw,9.5rem);line-height:.9;letter-spacing:.01em;text-transform:uppercase;color:#fff}
.lk-site__h .wd{display:inline-block;white-space:nowrap}
.lk-site__h .ch{display:inline-block}
.lk-site__kind{margin:12px 0 0;font-family:var(--rcl-font-mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#d6e4ec}
/* Text shadows keep the labels legible over bright photography. */
.lk-site__no,.lk-site__kind,.lk-site__rail{text-shadow:0 1px 2px rgba(6,12,18,.7),0 0 18px rgba(6,12,18,.55)}
.lk-site__h{text-shadow:0 2px 30px rgba(6,12,18,.35)}
.lk-site__copy{position:relative;justify-self:end;max-width:34rem;padding-left:18px;border-left:2px solid var(--lk-led)}
.lk-site__copy p{margin:0;font-size:var(--rcl-step-1);line-height:1.5;color:#eaf6fc}
.lk-site__rail,.lk-site__sheet{display:none}

/* Live: one pinned, full-screen panel */
.lk-site.is-live .lk-site__pin{position:relative;height:100vh;height:100svh;overflow:hidden}
.lk-site.is-live .lk-site__head{position:absolute;inset:0 0 auto;z-index:4;padding:0 var(--site-gut);top:50%;transform-origin:50% 0;pointer-events:none}
.lk-site.is-live .lk-site__slides{position:absolute;inset:0}
.lk-site.is-live .lk-site__slide{position:absolute;inset:0;min-height:0;margin:0;padding:0;display:block;visibility:hidden}
.lk-site.is-live .lk-site__img img{will-change:transform;transform-origin:50% 60%}
.lk-site.is-live .lk-site__name{position:absolute;left:var(--site-gut);right:var(--site-gut);top:50%;margin:0;text-align:center;transform:translateY(-38%)}
.lk-site.is-live .lk-site__h{overflow:hidden;padding-block:.06em;font-size:clamp(3rem,1rem + 9.5vw,11.5rem)}
.lk-site.is-live .lk-site__copy{position:absolute;right:var(--site-gut);bottom:clamp(28px,6vh,72px);width:min(34rem,calc(100% - 2 * var(--site-gut)))}
/* Drawing-sheet frame: corner marks and a faint grid, echoing the cable drawings */
.lk-site.is-live .lk-site__sheet{display:block;position:absolute;inset:calc(var(--rcl-header-h,100px) + 14px) 14px 14px;z-index:3;pointer-events:none;background:linear-gradient(rgba(143,166,184,.05) 1px,transparent 1px) 0 0 / 48px 48px,linear-gradient(90deg,rgba(143,166,184,.05) 1px,transparent 1px) 0 0 / 48px 48px;-webkit-mask-image:radial-gradient(80% 70% at 50% 50%,transparent 40%,#000);mask-image:radial-gradient(80% 70% at 50% 50%,transparent 40%,#000)}
.lk-site__sheet i{position:absolute;width:22px;height:22px;border:0 solid rgba(0,174,239,.7)}
.lk-site__sheet i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}
.lk-site__sheet i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.lk-site__sheet i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}
.lk-site__sheet i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.lk-site.is-live .lk-site__rail{display:grid;position:absolute;left:var(--site-gut);bottom:clamp(28px,6vh,72px);z-index:5;gap:10px;font-family:var(--rcl-font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.lk-site__count{margin:0;color:var(--rcl-text-faint)}
.lk-site__count b{font-weight:500;color:#fff}
.lk-site__rail ol{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.lk-site__rail button{display:flex;align-items:baseline;gap:12px;padding:3px 0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--rcl-text-faint);cursor:pointer;transition:color .3s var(--rcl-ease)}
.lk-site__rail button b{font-weight:400;opacity:.7}
.lk-site__rail button:hover,.lk-site__rail button:focus-visible{color:var(--rcl-text-muted)}
.lk-site__rail button[aria-current=true]{color:#fff}
.lk-site__rail button[aria-current=true] b{color:var(--lk-led);opacity:1}
.lk-site__bar{display:block;position:relative;width:min(220px,40vw);height:1px;margin-top:4px;background:rgba(143,166,184,.25)}
.lk-site__bar i{position:absolute;inset:0;background:var(--lk-led);transform-origin:0 50%;transform:scaleX(0)}
/* Light opening: the claim is set in ink on a pale drawing sheet, and site 01
   opens out of a window beneath it. js/rcl-onsite.js lays a white copy of the heading (.lk-site__lit)
   over the ink one, clipped to that same window, so each letter is ink over the
   paper and white over the photograph. As the window grows to fill the screen
   the claim turns white from the middle out and the paper falls away behind. */
.lk > .lk-site.is-live{padding-top:0}
.lk-site__paper{position:absolute;inset:-6%;z-index:0;pointer-events:none;background:linear-gradient(rgba(20,27,34,.055) 1px,transparent 1px) 50% 50% / 48px 48px,linear-gradient(90deg,rgba(20,27,34,.055) 1px,transparent 1px) 50% 50% / 48px 48px,var(--lk-white,#fff);will-change:transform,opacity}
.lk-site.is-live .lk-site__head{--lk-fg:var(--lk-ink);--lk-fg-3:var(--lk-ink-3)}
.lk-site.is-live .lk-site__head .lk-site__title{color:var(--lk-ink,#141b22)}
.lk-site__lit{position:absolute;inset:0;z-index:4;pointer-events:none;will-change:clip-path}
.lk-site.is-live .lk-site__lit .lk-site__head{--lk-fg:#fff;--lk-fg-3:var(--rcl-text-faint)}
.lk-site.is-live .lk-site__lit .lk-site__title{color:#fff;text-shadow:0 2px 30px rgba(6,12,18,.35)}
@media (max-width: 760px){
  .lk-site.is-live .lk-site__copy{left:var(--site-gut);right:var(--site-gut);width:auto;bottom:clamp(76px,12vh,110px)}
  .lk-site.is-live .lk-site__copy p{font-size:1rem}
  .lk-site.is-live .lk-site__rail{bottom:24px}
  .lk-site.is-live .lk-site__rail ol{display:none}
  .lk-site.is-live .lk-site__name{transform:translateY(-70%)}
}
@media (max-height: 640px){.lk-site.is-live .lk-site__rail ol{display:none}}