/* KNEHLER PARTNERS — homepage entry (the 3D mark). Uses the original site's colours and type
   from styles.css; nothing here touches the rest of the site. */

/* loader: the mark draws its outline, fills in black, then gives way to the 3D mark */
.kp-entry-loader{position:fixed;inset:0;z-index:200;background:var(--paper);display:grid;place-items:center;transition:opacity .9s ease,visibility 0s .9s}
.kp-entry-loader .stage{position:relative;width:clamp(96px,11vw,150px);aspect-ratio:751/708;transform:translateY(calc(var(--kp-hdr,0px) / 2))}
.kp-entry-loader svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kp-entry-loader path{fill:var(--ink);fill-opacity:0;stroke:var(--ink);stroke-width:1.4;stroke-dasharray:var(--len,6000);stroke-dashoffset:var(--len,6000);animation:kp-draw 1.5s cubic-bezier(.76,0,.24,1) forwards,kp-fill .6s 1.3s ease forwards}
@keyframes kp-draw{to{stroke-dashoffset:0}}
@keyframes kp-fill{to{fill-opacity:1}}
.kp-entry-loader.done{opacity:0;visibility:hidden;pointer-events:none}
.kp-entry-loader.skip{display:none}

/* the entry itself */
.kp-entry{position:relative;height:250vh}
.kp-entry-sticky{position:sticky;top:var(--kp-hdr,0px);height:calc(100vh - var(--kp-hdr,0px));height:calc(100svh - var(--kp-hdr,0px));overflow:hidden}
.kp-entry-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;z-index:2;pointer-events:none}
.kp-entry-statement{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:0 var(--pad,24px);opacity:0;will-change:opacity,transform}
.kp-entry-statement h1{margin:0;text-align:center;font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.7vw,27px);line-height:1.2;letter-spacing:-.005em;color:var(--ink);white-space:nowrap}
.kp-entry-statement h1 span{display:block;margin-top:.7em;font-size:.56em;letter-spacing:.02em;color:var(--muted)}
@media (max-width:640px){ .kp-entry-statement h1{white-space:normal;font-size:20px;max-width:20ch} .kp-entry-statement h1 span{font-size:.62em} }
.kp-entry-mark{display:none}

/* scroll cue: a hairline ending in a small arrowhead */
.kp-entry-cue{position:absolute;left:50%;bottom:22px;width:9px;height:52px;transform:translateX(-50%);z-index:3}
.kp-entry-cue::before{content:"";position:absolute;left:4px;top:0;width:1px;height:46px;background:var(--line)}
.kp-entry-cue i{position:absolute;left:4px;top:0;width:1px;height:46px;overflow:hidden}
.kp-entry-cue i::after{content:"";position:absolute;inset:0;background:var(--ink);animation:kp-cue 2.4s cubic-bezier(.76,0,.24,1) infinite}
.kp-entry-cue::after{content:"";position:absolute;left:1px;bottom:3px;width:6px;height:6px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(45deg)}
@keyframes kp-cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

@media (max-width:860px){ .kp-entry{height:220vh} }

/* without WebGL, or with reduced motion: the mark, then the statement, as two still screens */
.kp-entry-static .kp-entry{height:auto}
.kp-entry-static .kp-entry-sticky{position:relative;top:0;height:auto;overflow:visible}
.kp-entry-static .kp-entry-canvas,.kp-entry-static .kp-entry-cue{display:none}
.kp-entry-static .kp-entry-mark{display:block;width:clamp(96px,11vw,150px)!important;height:auto!important;margin:0 auto;padding:calc(50svh - 90px) 0}
.kp-entry-static .kp-entry-statement{position:relative;opacity:1;min-height:70svh}
@media (prefers-reduced-motion:reduce){ .kp-entry-loader path,.kp-entry-cue i::after{animation:none;stroke-dashoffset:0;fill-opacity:1} }

/* the top bar is fixed on the homepage so it can never scroll away behind the 3D mark */
.kp-home .site-header{position:fixed;top:0;left:0;right:0;transform:translateZ(0)}
.kp-home body{padding-top:var(--kp-hdr,57px)}