/* A quiet vertical index of the public projects. */
.work-view{position:absolute;left:50%;top:calc(33% + 48px);bottom:calc(62px + env(safe-area-inset-bottom,0px));width:min(700px,calc(100% - 56px));transform:translateX(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility 0s linear .24s;isolation:isolate;color:#eee}
.hero-name.work-active .work-view{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .24s ease .12s,visibility 0s linear .12s}
.work-list{list-style:none;margin:0;padding:4px;height:min(100%,420px);display:grid;grid-template-rows:repeat(4,minmax(0,1fr));overflow:visible}
.work-list li{position:relative;min-height:0;border-bottom:1px solid #ffffff24;isolation:isolate}
.work-list li::before{content:'';position:absolute;inset:-8px -22px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,rgba(0,0,0,.6) 15%,rgba(0,0,0,.44) 60%,transparent 90%)}
.work-list li:last-child{border-bottom:0}
.work-link{display:grid;height:100%;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;align-items:center;column-gap:22px;row-gap:6px;padding:6px 8px;color:#eee;text-decoration:none}
.work-link h2{grid-column:1;grid-row:1;margin:0;text-align:center;font:600 28px/1.25 system-ui,sans-serif}
.work-name{position:relative;display:inline-block;white-space:nowrap}
.work-name canvas{position:absolute;left:0;top:0;pointer-events:none;display:none}
.work-name.particle-ready{color:transparent}.work-name.particle-ready canvas{display:block}
.work-description{grid-column:1;grid-row:2;margin:0;text-align:center;color:#b8b8b8;font:13px/1.45 system-ui,sans-serif}
.work-destination{grid-column:2;grid-row:1;justify-self:center;display:inline-flex;align-items:center;gap:10px;color:#bbb;font:12px/1.4 system-ui,sans-serif;white-space:nowrap}
.work-link:hover .work-destination,.work-link:focus-visible .work-destination{color:#fff}
.work-link:hover .work-destination>span:first-child{text-decoration:underline;text-underline-offset:5px}
.work-addressed{box-shadow:inset 2px 0 #ddd}
.external-arrow{display:inline-block;font:inherit;line-height:1;flex:none}
.company-projects{list-style:none;padding:0;margin:9px 0 0;display:grid;gap:7px}
.company-projects a{display:flex;align-items:center;flex-wrap:wrap;gap:3px 7px;color:#eee;text-decoration:none}
.company-projects a:hover{text-decoration:underline;text-underline-offset:4px}
.company-project-domain{color:#aaa;font-size:10px;margin-left:auto}
.company-projects .external-arrow{color:#bbb;font-size:12px}
.menu-active .landing-menu::before{content:'';position:absolute;inset:-14px -25px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#000c,transparent 75%)}
.menu-options button[aria-current=page]{box-shadow:none;border-bottom:1px solid #ddd}
.menu-options button{border-bottom:1px solid transparent}
.site-footer a[aria-expanded=true]{text-decoration:underline;text-underline-offset:5px;color:#fff}
body :is(a,button,input,summary):focus-visible{outline:2px solid #eee;outline-offset:3px;border-radius:2px}
.menu-options button:hover{opacity:1;color:#fff;background:#ffffff0b}
@media(max-width:600px){
  .work-view{width:calc(100% - 32px);top:calc(33% + 40px)}
  .work-link{grid-template-columns:1fr;padding:6px 4px;gap:5px}
  .work-link h2{font-size:24px}.work-description{grid-row:2;font-size:12px}
  .work-destination{grid-column:1;grid-row:3;font-size:11px;gap:8px}
}
@media(max-height:650px){
  .hero-name.work-active .landing-menu{top:15%}
  .work-view{top:calc(15% + 36px);bottom:calc(52px + env(safe-area-inset-bottom,0px))}
  .work-link{padding-top:4px;padding-bottom:4px}.work-link h2{font-size:23px}
}
@media(max-height:430px){
  .hero-name.work-active .landing-menu{top:9%}.work-view{top:calc(9% + 32px)}
  .work-link{grid-template-columns:repeat(2,minmax(0,1fr));padding:4px 6px;gap:5px 12px}
  .work-link h2{font-size:20px}.work-description{display:none}
  .work-destination{grid-column:2;grid-row:1;font-size:11px}
}
@media(max-width:600px) and (max-height:500px){
  .work-description{display:none}.work-link{grid-template-columns:1fr;gap:3px}
  .work-destination{grid-column:1;grid-row:2}.work-link h2{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.work-view,.hero-name.work-active .work-view{transition:none}}