#index-view{--case-muted:#777;padding-bottom:72px}
[data-theme="dark"] #index-view{--case-muted:#aaa}
#index-view a{color:inherit;text-decoration:none}
.index-heading-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 28px}
#index-view .index-heading-row #index-heading{font-size:16px;line-height:1.5;font-weight:400;margin:0}
.index-heading-row h1 span{font-size:12px;color:var(--case-muted);margin-left:9px;white-space:nowrap}
.index-heading-row p{font-size:14px;color:var(--case-muted);margin:0}
#index-grid{column-gap:24px;row-gap:49px}
.index-image{position:relative;overflow:hidden;background:#eee;aspect-ratio:1.25}
#index-grid .project-thumbnail{aspect-ratio:auto;width:100%;height:100%;object-fit:cover;transition:transform 600ms cubic-bezier(.2,.6,.3,1)}
.index-arrow{position:absolute;right:15px;bottom:15px;width:38px;height:38px;display:grid;place-items:center;background:#fff;color:#111;border-radius:50%;font-size:22px;transform:translateY(65px);transition:transform 250ms ease}
.index-card:is(:hover,:focus-visible) .project-thumbnail{transform:scale(1.035)}
.index-card:is(:hover,:focus-visible) .index-arrow{transform:translateY(0)}
#index-grid .project-meta{margin-top:17px;align-items:center}
#index-grid .project-name{font-size:16px;font-weight:400;line-height:1.5}
#index-grid .project-summary{font-size:14px;font-weight:400;line-height:1.5;margin:6px 0 0;color:var(--case-muted)}
#index-grid .project-number{font-size:12px;color:var(--case-muted)}
.case-back{display:inline-block;font-size:14px;color:var(--case-muted)!important;margin:0 0 30px;padding:4px 0}

.case-page{max-width:950px;margin:auto}
#index-view .case-introduction #index-heading{font-size:clamp(34px,4.3vw,58px);font-weight:400;letter-spacing:-.04em;line-height:1.1;margin:0 0 24px}
#index-heading:focus{outline:none}
.case-introduction>p{font-size:16px;line-height:1.65;color:var(--case-muted);max-width:850px;margin:0}
.case-tool{display:inline-block;font-size:14px;margin-top:18px}
.case-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px;margin:42px 0 36px}
.case-facts dt{font-size:15px;font-weight:500;margin-bottom:7px}
.case-facts dd{font-size:16px;color:var(--case-muted);line-height:1.5;margin:0}
.case-gallery{display:grid;gap:24px;margin:36px auto 0}
.case-gallery>img,.case-gallery>video{display:block;width:100%;height:auto;max-width:100%}
.case-gallery>video{background:#111}
.case-bottom{margin:36px 0 0}
@media(max-width:600px){.index-heading-row{align-items:flex-start;flex-direction:column;gap:8px}.index-heading-row p{font-size:12px}.index-image{aspect-ratio:1.2}.case-facts{gap:24px 20px;margin:32px 0}.case-gallery{gap:16px;margin-top:28px}.case-back{margin-bottom:24px}.case-bottom{margin-top:28px}}
@media(prefers-reduced-motion:reduce){#index-grid .project-thumbnail,.index-arrow{transition:none}}
.is-index #loading{display:none}
#index-view .index-heading-row #index-heading{letter-spacing:0;max-width:none}

.case-back,.case-tool{display:inline-flex;align-items:center;gap:6px;line-height:20px}
.case-nav-icon{display:block;width:14px;height:14px;flex:none}

/* Draw the line beneath link text without underlining the icon. */
.case-back>span,.case-tool>span,#index-grid .project-name{position:relative;width:fit-content}
.case-back>span::after,.case-tool>span::after,#index-grid .project-name::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 240ms ease}
.case-back:is(:hover,:focus-visible)>span::after,.case-tool:is(:hover,:focus-visible)>span::after,#index-grid .index-card:is(:hover,:focus-visible) .project-name::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.case-back>span::after,.case-tool>span::after,#index-grid .project-name::after{transition:none}}

/* Fade scrolling content into the page, without a tinted footer band. */
#index-view:has(.index-coming-soon){-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 90px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 90px),transparent 100%);padding-bottom:16px}
.index-coming-soon{display:flex;align-items:center;justify-content:center;min-height:80px;margin-top:40px;text-align:center}
.index-coming-soon p{margin:0;padding:0 20px;font-size:13px;font-weight:400;line-height:1.5;color:var(--case-muted)}
@media(max-width:600px){.index-coming-soon{min-height:72px;margin-top:28px}}