/* The bar at the top of every page except the desktop homepage. */
.case-top{
  position:sticky;
  top:0;
  z-index:20;
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 64px;
  background:rgba(241,241,245,.85);
  backdrop-filter:blur(10px);
}
.case-top .logo{position:relative;top:0}
/* Two spans so the last name can drop under the first when the row is tight.
   On a wide bar they stay on one line, with a space between them. */
.case-top .logo span + span::before,
.topbar .logo span + span::before{content:" "}
.tnav{
  position:absolute;
  left:50%;
  top:19px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:34px;
}
.tnav a{
  font-size:15px;
  font-weight:500;
  color:var(--ink,#171A33);
  text-decoration:none;
  padding:6px 0;
  white-space:nowrap;
}
.tl:hover,
.tl:focus-visible{color:var(--ink,#171A33)}
body.about-page{overflow-x:visible}
body.story-page .case-top{position:fixed;left:0;right:0}
body.story-page .present-btn{position:relative;z-index:2;flex:none}
@media (max-width:899px){
  .case-top,
  .topbar{
    position:sticky;
    top:0;
    z-index:40;
    height:auto;
    min-height:64px;
    padding:10px 16px;
    background:rgba(241,241,245,.92);
    backdrop-filter:blur(10px);
  }
  .case-top{gap:10px}
  body.story-page .case-top{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  body.story-page .present-btn{margin-left:auto}
  .case-top .logo,
  .topbar .logo{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    flex-shrink:0;
    font-size:14px;
    line-height:1.05;
    letter-spacing:-.03em;
    white-space:normal;
  }
  .case-top .logo span + span::before,
  .topbar .logo span + span::before{content:none}
  .tnav,
  .topbar nav{
    position:static;
    transform:none;
    gap:12px;
    flex-shrink:0;
    margin-left:auto;
  }
  .tnav a,
  .case-top .git,
  .topbar a,
  .topbar .git{font-size:14px}
}
/* Homepage phone and tablet: the bar stays put while the cards snap. */
@media (max-width:899px){
  html.home-page .topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:64px;
    min-height:0;
    z-index:40;
  }
}
@media (max-width:400px){
  .case-top,
  .topbar{padding-left:12px;padding-right:12px}
  .tnav,
  .topbar nav{gap:8px}
  .case-top .logo,
  .topbar .logo{font-size:13px}
  .tnav a,
  .case-top .git,
  .topbar a,
  .topbar .git{font-size:13px}
}

/* Nav hovers. Same behavior in the homepage sentence and the top bar. */

a.ul{
  transition:background-size .35s var(--ease-move);
}
a.ul:hover,
a.ul:focus-visible{
  background-size:100% 100%;
  color:var(--ink);
}

/* Top-bar links draw a thin underline in from the left. */
.tl{
  position:relative;
  text-decoration:none;
  color:var(--ink);
}
.tl::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1.5px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s var(--ease-move);
}
.tl:hover::after,
.tl:focus-visible::after{transform:scaleX(1)}

/* Get in touch. The words take the same lilac fill as "about me".
   The two icons sit centered underneath, dark on a lilac circle. */
.git{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:44px;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;
}
.git::before{content:none}
.git .t{
  position:relative;
  z-index:1;
  appearance:none;
  background:none;
  border:0;
  padding:1px 3px;
  margin:0 -3px;
  font:inherit;
  color:inherit;
  cursor:pointer;
  border-radius:3px;
  background-image:linear-gradient(var(--lilac),var(--lilac));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 0;
  transition:background-size .35s var(--ease-move);
}
.git:not(.inl):hover .t,
.git:not(.inl):focus-within .t,
.git:not(.inl).is-open .t{
  background-size:100% 100%;
  color:var(--ink);
}
.git .gi{
  position:absolute;
  left:100%;
  top:50%;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:5;
  margin:0;
  padding:6px 0 6px 8px;
  background:transparent;
  opacity:0;
  visibility:hidden;
  transform:translateY(-50%);
  pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease;
}
.git.is-under .gi,
.git.is-under.is-open .gi{
  left:50%;
  top:100%;
  padding:8px 8px 0;
  transform:translateX(-50%);
}
@media (max-width:1199px){
  .git.is-under .gi,
  .git.is-under.is-open .gi{
    top:100%;
    padding:2px 8px 0;
  }
  .git.is-under .gi a{
    background:#E4E4EA;
  }
  .git.is-under .gi a:hover,
  .git.is-under .gi a:focus-visible{
    background:var(--lilac);
    color:var(--ink);
  }
}
.git .gi a{
  width:36px;
  height:36px;
  min-height:0;
  padding:0;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--lilac);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  letter-spacing:-.02em;
}
.git .gi svg{display:block}
.git .gi a:hover,
.git .gi a:focus-visible{background:var(--lilac);color:var(--ink)}
.git:hover .gi,
.git:focus-within .gi,
.git.is-open .gi{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
@media (max-width:899px){
  .git .gi,
  .git.is-open .gi,
  .git:hover .gi,
  .git:focus-within .gi{
    left:50%;
    top:calc(100% - 6px);
    padding:0 8px;
    transform:translateX(-50%);
  }
  .git .gi a{
    background:#E4E4EA;
  }
  .git .gi a:hover,
  .git .gi a:focus-visible{
    background:var(--lilac);
    color:var(--ink);
  }
}

/* Homepage sentence: the words already carry the lilac underline. */
.git.inl{
  height:32px;
  margin-left:0;
  font-size:17px;
  font-weight:400;
  color:var(--muted);
  vertical-align:baseline;
}
.git.inl .t{background:none;padding:0;margin:0}
.git.inl .ul{font-weight:600}
.git.inl:hover .ul,
.git.inl:focus-within .ul,
.git.inl.is-open .ul{
  background-size:100% 100%;
  color:var(--ink);
}

button:focus-visible{outline:2px solid var(--indigo);outline-offset:4px;border-radius:4px}
.topbar .gi a,.case-top .gi a{min-height:0;height:36px;font-size:14px}