:root{--ease:cubic-bezier(.16,.84,.3,1)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#79C0EE;color:#fff;overflow:hidden;font-family:"Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.mono{font-family:"DM Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase}
#cv{position:fixed;top:0;left:0;z-index:0;image-rendering:pixelated;image-rendering:crisp-edges;transform-origin:top left}
.ui{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;
  padding:max(18px,env(safe-area-inset-top)) clamp(20px,5vw,56px) calc(24px + env(safe-area-inset-bottom));pointer-events:none;
  text-shadow:0 1px 10px rgba(0,30,10,.4)}
.ui a,.ui .kc-nav-toggle{pointer-events:auto}
.top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.top .name{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:clamp(1.05rem,2.2vw,1.35rem);letter-spacing:-.01em}

.kc-nav{position:relative}
.kc-nav-toggle{border:0;background:none;cursor:pointer;padding:0;width:30px;height:26px;display:flex;align-items:center;justify-content:center;color:#fff}
.kc-burger,.kc-burger::before,.kc-burger::after{
  content:"";display:block;width:20px;height:2px;background:currentColor;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.kc-burger{position:relative}
.kc-burger::before{position:absolute;top:-6px;left:0}
.kc-burger::after{position:absolute;top:6px;left:0}
.kc-nav:hover .kc-burger,.kc-nav:focus-within .kc-burger{background:transparent}
.kc-nav:hover .kc-burger::before,.kc-nav:focus-within .kc-burger::before{transform:translateY(6px) rotate(45deg)}
.kc-nav:hover .kc-burger::after,.kc-nav:focus-within .kc-burger::after{transform:translateY(-6px) rotate(-45deg)}
.kc-nav-panel{
  position:absolute;top:calc(100% + 14px);right:0;min-width:180px;
  background:rgba(12,20,14,.82);backdrop-filter:blur(14px);
  border-radius:10px;padding:8px;display:flex;flex-direction:column;
  box-shadow:0 14px 40px rgba(0,10,4,.35);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.kc-nav-panel a{padding:12px 14px;border-radius:7px;opacity:.85}
.kc-nav-panel a:hover,.kc-nav-panel a[aria-current]{background:rgba(255,255,255,.1);opacity:1}
.kc-nav:hover .kc-nav-panel,.kc-nav:focus-within .kc-nav-panel{opacity:1;transform:translateY(0);pointer-events:auto}
/* on devices with a real pointer, hovering slides the links out
   horizontally instead of opening a dropdown */
@media (hover:hover) and (min-width:680px){
  .kc-nav-panel{
    top:50%;bottom:auto;right:calc(100% + 14px);left:auto;
    transform:translateY(-50%) translateX(8px);
    flex-direction:row;align-items:baseline;gap:clamp(12px,2vw,22px);
    min-width:0;white-space:nowrap;background:none;backdrop-filter:none;
    border-radius:0;padding:0;box-shadow:none;
  }
  .kc-nav-panel a{padding:0;border-radius:0;opacity:.9}
  .kc-nav-panel a:hover,.kc-nav-panel a[aria-current]{background:none;opacity:1}
  .kc-nav:hover .kc-nav-panel,.kc-nav:focus-within .kc-nav-panel{transform:translateY(-50%) translateX(0)}
}
.mid{flex:1;display:flex;align-items:flex-start;padding-top:clamp(24px,7vh,70px)}
h1{color:#fff;font-family:"Newsreader",Georgia,serif;font-weight:200;font-size:clamp(2.2rem,7vw,5.2rem);line-height:1.02;letter-spacing:-.02em;text-shadow:0 2px 20px rgba(0,25,10,.55),0 1px 4px rgba(0,20,8,.6)}
h1 .l{display:block;overflow:hidden}
h1 .l i{display:block;font-style:normal;transform:translateY(104%)}
.sub{margin-top:clamp(12px,2.2vh,20px);max-width:42ch;font-size:clamp(.92rem,1.5vw,1.05rem);line-height:1.55;color:rgba(255,255,255,.9);opacity:0;transform:translateY(10px)}
.bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;color:#fff}
.enter{display:inline-flex;align-items:center;gap:10px;opacity:0;transform:translateY(10px)}
.enter .line{width:32px;height:2px;background:currentColor;transform-origin:left;transition:transform .5s var(--ease)}
.enter:hover .line{transform:scaleX(1.6)}
.credit{opacity:.85}
@media (max-width:680px){
  .credit{display:none}
}
@media (prefers-reduced-motion:reduce){h1 .l i{transform:none}.sub,.enter{opacity:1;transform:none}}