/* Opening typography scrolls with the page; only the unframed mark stays. */
:root{--opening-height:86px;--header-inline:var(--gutter);--mark-size:37px}
html{scroll-padding-top:32px}
.site-header{position:absolute;height:var(--opening-height);z-index:30;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header:after{display:none}
.site-header .brand>img{visibility:hidden}
.site-header .motion-toggle{background:transparent;border-color:transparent}
.floating-logo{position:fixed;z-index:35;left:calc(var(--header-inline) - (44px - var(--mark-size))/2);top:calc((var(--opening-height) - 44px)/2);width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;box-shadow:none}
.floating-logo img{display:block;width:var(--mark-size);height:var(--mark-size);transform-origin:50% 75%;transition:rotate .4s cubic-bezier(.2,.8,.2,1)}
.floating-logo{transition:left .5s cubic-bezier(.2,.8,.2,1)}
.floating-logo.is-detached{left:max(10px,1.45vw)}
.floating-logo:hover img,.floating-logo:focus-visible img{rotate:-9deg}
.floating-logo:focus-visible,.edge-control:focus-visible{outline:1px solid #53674b;outline-offset:2px;border-radius:2px}

/* Split rails leave the entire top edge and the centre of the scene open. */
.edge-nav{position:fixed;z-index:32;top:50%;display:flex;flex-direction:column;gap:8px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(calc(-50% + 8px));transition:opacity .36s ease,transform .5s cubic-bezier(.2,.8,.2,1),visibility .36s}
.edge-nav-left{left:max(10px,1.45vw)}
.edge-nav-right{right:max(10px,1.45vw)}
.edge-nav.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%)}
.edge-control{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:0;background:transparent;color:#616b58;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.edge-control>svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:color .2s,transform .35s cubic-bezier(.2,.8,.2,1)}
.edge-control:hover,.edge-control:focus-visible,.edge-control[aria-current="location"]{color:#293d22}
.edge-control[aria-current="location"]:after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:currentColor;bottom:3px;left:calc(50% - 1.5px)}
.edge-control:active>svg{transform:scale(.9)}
.edge-label{position:absolute;top:50%;width:max-content;max-width:150px;font-size:11px;letter-spacing:.07em;line-height:1.6;white-space:nowrap;color:#35442e;opacity:0;pointer-events:none;transform:translate(var(--label-shift),-50%);clip-path:inset(0 100% 0 0);transition:opacity .2s,transform .32s cubic-bezier(.2,.8,.2,1),clip-path .32s;text-shadow:0 1px 8px #f5f3ed,0 0 16px #f5f3ed}
.edge-nav-left .edge-label{left:44px;--label-shift:-5px}
.edge-nav-right .edge-label{right:44px;--label-shift:5px;clip-path:inset(0 0 0 100%)}
.edge-control:hover .edge-label,.edge-control:focus-visible .edge-label{opacity:1;clip-path:inset(0);transform:translate(0,-50%)}
.edge-play{display:none}
#edge-motion[aria-pressed="true"] .edge-pause{display:none}
#edge-motion[aria-pressed="true"] .edge-play{display:block}

@media(max-width:700px){
 :root{--opening-height:74px;--header-inline:16px;--mark-size:26px}
 .floating-logo.is-detached{left:calc(var(--header-inline) - (44px - var(--mark-size))/2)}
 .edge-nav{top:auto;bottom:calc(14px + env(safe-area-inset-bottom));flex-direction:row;gap:2px;transform:translateY(8px)}
 .edge-nav.is-visible{transform:none}
 .edge-nav-left{left:10px}.edge-nav-right{right:10px}
 .edge-control>svg{width:17px;height:17px}
 .edge-nav .edge-label{top:auto;bottom:44px;transform:translate(0,4px);font-size:10px;clip-path:inset(100% 0 0)}
 .edge-nav-left .edge-label{left:12px}.edge-nav-right .edge-label{right:12px}
 .edge-control:hover .edge-label,.edge-control:focus-visible .edge-label{transform:none;clip-path:inset(0)}
}
@media(max-width:360px){:root{--header-inline:12px;--mark-size:24px}}
@media(hover:none){
 .edge-control:hover .edge-label{opacity:0}
 .edge-control:focus-visible .edge-label{opacity:1}
}
@media(prefers-reduced-motion:reduce){
 .edge-nav,.edge-control>svg,.edge-label,.floating-logo,.floating-logo img{transition:none!important}
 .floating-logo img{rotate:none!important}
 #edge-motion{display:none}
}
.motion-paused .edge-nav,.motion-paused .edge-control>svg,.motion-paused .edge-label,.motion-paused .floating-logo,.motion-paused .floating-logo img{transition:none!important}
.motion-paused .floating-logo img{rotate:none!important}