html{scroll-padding-top:96px}
.header{position:fixed;z-index:20;transition:background .25s,box-shadow .25s,backdrop-filter .25s}
.header.scrolled{background:rgba(4,10,15,.94);box-shadow:0 8px 30px rgba(0,0,0,.32);backdrop-filter:blur(14px)}
.logo img{mix-blend-mode:normal;background:transparent}
.anchor-section{scroll-margin-top:96px}

/* Keep the showcases transparent: the objects are already lit in the artwork. */
.case{isolation:isolate;transition:transform .45s ease}
.case:before{display:none}
.case:after{content:"";position:absolute;z-index:1;left:22%;right:22%;bottom:8.5%;height:1px;background:linear-gradient(90deg,transparent,rgba(37,198,255,.2) 18%,#55d8ff 50%,rgba(37,198,255,.2) 82%,transparent);opacity:.24;box-shadow:0 0 0 rgba(39,198,255,0);transition:opacity .45s ease,box-shadow .45s ease,transform .45s ease;pointer-events:none}
.case-status,.case-copy{position:relative;z-index:2}
.case-status{opacity:.65}
.case:hover,.case:focus-within{transform:translateY(-4px)}
.case:hover:after,.case:focus-within:after{opacity:1;box-shadow:0 0 9px #21c5ff,0 0 32px rgba(33,197,255,.68);transform:scaleX(1.14)}
.case:hover .case-status,.case:focus-within .case-status{opacity:1;color:#8adfff}
.case:focus-within{outline:none}
.case-copy h2{text-shadow:0 2px 14px rgba(0,0,0,.95)}
.case-copy h2:after{content:"";display:block;width:4px;height:4px;margin:12px auto 0;border-radius:50%;background:#65727a;box-shadow:0 0 0 rgba(41,197,255,0);transition:.4s ease}
.case:hover .case-copy h2:after,.case:focus-within .case-copy h2:after{background:#63ddff;box-shadow:0 0 7px #29c5ff,0 0 19px #29c5ff}
.case-copy p{font-size:10px;color:#d3dce1;text-shadow:0 2px 12px #000}
.case-copy button{font-size:10px;color:#fff;text-shadow:0 2px 8px #000}
.case-copy button i{background:rgba(1,7,11,.5);transition:background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}
.case:hover .case-copy button i,.case:focus-within .case-copy button i{border-color:rgba(86,216,255,.78);box-shadow:0 0 16px rgba(41,197,255,.2)}

@media(min-width:1101px){
  .gallery-hero{height:941px;background:#050b10}
  .gallery-bg{height:941px}
  .case-base{bottom:-12%;font-size:10px;text-shadow:0 2px 10px #000}
}

.project-details{background:#03080c}
.detail,.detail.open{opacity:.46;filter:grayscale(1) brightness(.72);background:#050b10;transition:opacity .45s ease,filter .45s ease,background .45s ease,box-shadow .45s ease}
.detail:hover,.detail:focus-within{opacity:1;filter:grayscale(0) brightness(1);background:radial-gradient(circle at 65% 20%,rgba(22,146,198,.12),transparent 38%),#050b10;box-shadow:inset 0 1px rgba(51,178,226,.16)}
.experience-summary{padding:110px 7vw;background:#040a0e;border-top:1px solid rgba(144,177,196,.16)}
.experience-summary header>span{color:#c99a5a;font-size:11px;letter-spacing:.24em}
.experience-summary header h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,5vw,72px);font-weight:400;line-height:1.08;letter-spacing:-.04em;margin:24px 0 55px}
.experience-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(144,177,196,.25)}
.experience-grid article{min-height:210px;display:flex;flex-direction:column;justify-content:center;padding:35px 45px;border-right:1px solid rgba(144,177,196,.16);background:#050b10}
.experience-grid article:last-child{border-right:0}
.experience-grid strong{font-family:Georgia,'Times New Roman',serif;font-size:78px;font-weight:400;line-height:1}
.experience-grid span{margin-top:16px;color:#92a5b2;text-transform:uppercase;font-size:12px;letter-spacing:.2em}

@media(max-width:1100px){.header{background:rgba(4,10,15,.9)}.gallery-hero{min-height:1080px}.experience-grid{grid-template-columns:1fr}.experience-grid article{min-height:150px;border-right:0;border-bottom:1px solid rgba(144,177,196,.25)}.experience-grid article:last-child{border-bottom:0}}
@media(max-width:700px){html{scroll-padding-top:82px}.anchor-section{scroll-margin-top:82px}.gallery-hero{min-height:1040px}.case:after{left:22%;right:22%;bottom:5%}.case-copy p{font-size:8px}.experience-summary{padding:80px 22px}.experience-grid article{padding:28px}.experience-grid strong{font-size:64px}}

.closed-note{background:linear-gradient(90deg,rgba(3,8,12,.985),rgba(3,8,12,.94)),url('../img/gallery-bg.png') center 60%/cover}