/* Project pages: one introduction, then the work. */
#case-dialog{
  --case-ink:#eeece8;
  --case-muted:#a5a5a0;
  --case-line:#eeece827;
  --case-gutter:clamp(24px,4vw,54px);
  width:min(1200px,95vw);
  background:#080909;
  color:var(--case-ink);
}
#case-dialog .case-dialog-top{
  min-height:0;
  padding:12px var(--case-gutter);
  border-bottom:0;
  background:#080909f5;
  backdrop-filter:blur(16px);
}
#case-dialog-index{font:11px/1.5 Arial,sans-serif;letter-spacing:.06em;color:var(--case-muted)}
#case-close{width:34px;height:34px;flex-basis:34px;border:0;font-size:27px}
#case-dialog .case-introduction{padding:26px var(--case-gutter) 36px}
#case-dialog #case-dialog-title{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 24px;
  margin:0;
  font-size:clamp(42px,5.2vw,70px);
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.055em;
  color:var(--case-ink);
}
#case-dialog-title>small{font-size:clamp(17px,1.8vw,23px);font-weight:400;letter-spacing:.03em;color:#d1d0cb}
#case-dialog .case-lead{max-width:43em;margin:20px 0 0;color:#b8b8b2;font-size:14px;line-height:1.85;letter-spacing:.025em;text-wrap:pretty}
.case-inline-model{display:flex;align-items:center;gap:30px;border:0;border-bottom:1px solid var(--case-line);padding:10px 0 7px;margin-top:16px;background:none;color:var(--case-ink);font-size:12px}
.case-inline-model:hover{border-color:var(--case-ink)}
#case-dialog .case-hero-image.interactive-hero{
  margin:0 var(--case-gutter);
  min-height:0;
  height:clamp(330px,47vw,570px);
  aspect-ratio:auto;
  border:1px solid var(--case-line);
}
#case-dialog .case-model-preview [data-viewer-id="canvas-wrap"]{min-height:0;flex:1;aspect-ratio:auto}
#case-dialog .preview-toolbar{padding:10px 12px;min-height:48px;background:#101212;border-color:var(--case-line);gap:8px}
#case-dialog .preview-toolbar button{font-size:11px;line-height:1.5;font-family:inherit;padding:6px 9px}
#case-dialog .case-image-label{margin:46px var(--case-gutter) 16px;font-size:12px;letter-spacing:.08em;color:var(--case-muted)}
#case-dialog .case-image-section{padding:0 var(--case-gutter);border:0;scroll-margin-top:65px}
#case-dialog .gallery-main{aspect-ratio:16/10;background:#111313;border:1px solid #eeece812}
#case-dialog[data-kind="spatial"] .gallery-main{aspect-ratio:16/9}
#case-dialog .gallery-main>img{object-fit:contain}
#case-dialog .gallery-main>span{display:grid;place-items:center;width:38px;height:38px;padding:0;right:14px;bottom:14px;font:22px/1 Arial,sans-serif;border:0;background:#080909aa;opacity:0;transition:opacity .2s}
#case-dialog .gallery-main:hover>span,#case-dialog .gallery-main:focus-visible>span{opacity:1}
#case-dialog .gallery-main:hover>img{transform:none}
#case-dialog .gallery-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0 0}
#case-dialog .gallery-bar>p{font-size:12px;line-height:1.6;color:#bdbdb6;max-width:65%}
#case-dialog .gallery-paging{gap:12px;margin:0}
#case-dialog .gallery-paging>span{font:11px/1.5 Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--case-muted)}
#case-dialog .gallery-paging button{width:32px;height:32px;border:0;background:transparent;font-size:20px}
#case-dialog .gallery-paging button:hover{color:#080909;background:#eeece8}
#case-dialog .gallery-thumbs{gap:10px;margin:18px 0 0;padding:2px 1px 8px;scrollbar-width:thin}
#case-dialog .gallery-thumbs>button{flex:0 0 82px;width:82px;aspect-ratio:16/10;background:#171918;border:0;opacity:.45}
#case-dialog .gallery-thumbs>button[aria-pressed=true]{opacity:1;box-shadow:0 2px 0 0 var(--case-ink)}
#case-dialog .gallery-thumbs>button:hover{opacity:1}
.case-concept-spread{display:grid;grid-template-columns:1fr 1fr;min-width:0}
.case-concept-spread>.portfolio-art{aspect-ratio:4/5;min-height:0;height:auto}
#case-dialog .case-concept-spread .art-word{font-size:clamp(68px,10vw,140px)}
.concept-caption{font-size:12px;color:var(--case-muted);margin:16px 0 0}
.case-afterword{padding:26px var(--case-gutter) 0}
.case-utility-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0 24px}
#case-dialog .case-utility-row button{font-size:12px;font-family:inherit;color:#c3c3bc;background:none;border:0;padding:5px 0}
#case-dialog .case-utility-row button:hover{color:#fff}
.case-inquire{display:flex;gap:30px;align-items:center}
.case-colophon{border-top:1px solid var(--case-line);font-size:12px}
.case-colophon>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:20px 0;color:var(--case-muted);cursor:pointer}
.case-colophon>summary::-webkit-details-marker{display:none}
.case-colophon>summary:hover{color:var(--case-ink)}
.case-colophon>summary>span{font-size:18px;line-height:1;transition:transform .2s}
.case-colophon[open]>summary>span{transform:rotate(45deg)}
.case-colophon-body{padding:0 0 26px;max-width:800px}
.case-colophon dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 20px}
.case-colophon dt{color:#8d918a;margin-bottom:7px;font-size:11px}
.case-colophon dd{margin:0;color:#cecec7;line-height:1.7;font-size:12px}
.case-colophon p{margin:0;font-size:12px;line-height:1.9;color:#a2a69c;text-wrap:pretty}
.case-companion{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;background:none;border:0;border-top:1px solid var(--case-line);color:var(--case-ink);padding:22px 0;text-align:left;font-family:inherit}
.case-companion>span{font-size:11px;color:var(--case-muted)}
.case-companion>strong{font-size:15px;line-height:1.6;font-weight:400}
.case-companion i{font-style:normal;padding-left:20px;display:inline-block;transition:translate .2s}
.case-companion:hover i{translate:3px -3px}
.case-turnpage{display:flex;gap:30px;align-items:center;padding:28px var(--case-gutter);margin-top:18px;border-top:1px solid var(--case-line)}
.case-turnpage button{border:0;background:none;color:var(--case-ink);font-family:inherit}
.case-previous{flex:0 0 40px;height:40px;font-size:24px;padding:0}
.case-next{display:flex;align-items:center;gap:26px;width:100%;padding:0;text-align:left}
.case-next-copy{flex:1;min-width:0}
.case-next-copy small{display:block;font-size:11px;color:var(--case-muted);margin-bottom:9px}
.case-next-copy strong{font-size:clamp(22px,2.6vw,32px);line-height:1.4;font-weight:400;letter-spacing:-.025em}
.case-next img{width:115px;height:78px;object-fit:cover;filter:saturate(.8);transition:filter .2s}
.case-next-arrow{font:32px/1 Arial,sans-serif;transition:translate .25s}
.case-next:hover img{filter:saturate(1)}
.case-next:hover .case-next-arrow{translate:4px -4px}
.case-previous:hover{color:#aaa}
#case-dialog :is(button,summary):focus-visible{outline:2px solid #eeece8;outline-offset:4px}

/* The index uses one title and one category per work. */
#projects .project-count{display:none}
#projects .section-head{margin-bottom:36px}
#projects .work-end{justify-content:flex-end}
#projects .case-card-meta{display:flex;justify-content:space-between;gap:16px;color:#a5a7a2;font-size:11px;line-height:1.5;letter-spacing:.03em}
#projects .portfolio-card .portfolio-card-copy{padding-top:20px}
#projects .portfolio-card-copy h3{margin:10px 0 0;font-size:clamp(23px,2.4vw,33px)}
#projects .portfolio-card-foot{padding-top:12px;margin-top:18px;border-color:#eeece815}
#projects .portfolio-featured .case-open{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);border:0}
#projects .portfolio-featured .portfolio-card-copy{padding:32px 0 32px 40px;justify-content:center}
#projects .portfolio-featured .portfolio-card-copy h3{font-size:clamp(30px,3.2vw,44px);line-height:1.3;margin:18px 0 20px;text-wrap:balance}
#projects .portfolio-featured .portfolio-card-copy>p{font-size:14px;line-height:1.85;max-width:28em;color:#b3b5ae}
#projects .portfolio-card .media-action{padding:0;background:none}
#projects .portfolio-card .media-action i{width:40px;height:40px;background:#eeece8;color:#080909}

@media(max-width:900px){
  #projects .portfolio-featured .case-open{display:block}
  #projects .portfolio-featured .card-media{aspect-ratio:16/10;min-height:0;height:auto}
  #projects .portfolio-featured .portfolio-card-copy{padding:20px 0 0}
  #projects .portfolio-featured .portfolio-card-copy h3{margin:10px 0 14px;font-size:30px}
  #projects .portfolio-featured .portfolio-card-copy>p{max-width:42em}
}
@media(max-width:700px){
  #case-dialog{--case-gutter:22px;width:100vw;max-width:100vw;margin:0;border:0;max-height:100dvh;height:100dvh}
  #case-dialog .case-dialog-top{padding-block:10px}
  #case-dialog .case-introduction{padding-top:22px;padding-bottom:28px}
  #case-dialog #case-dialog-title{font-size:46px;gap:8px 18px}
  #case-dialog-title>small{font-size:17px}
  #case-dialog .case-lead{font-size:13px;line-height:1.85;margin-top:16px;max-width:36em}
  #case-dialog .case-hero-image.interactive-hero{height:clamp(300px,62vw,410px)}
  #case-dialog .preview-toolbar{padding:9px;gap:6px}
  #case-dialog .preview-toolbar button{font-size:10px;padding:7px}
  #case-dialog .case-image-label{margin-top:32px;font-size:11px}
  #case-dialog .gallery-main{aspect-ratio:4/3}
  #case-dialog .gallery-main>span{opacity:1;width:30px;height:30px;font-size:18px;bottom:9px;right:9px}
  #case-dialog .gallery-bar{gap:12px;padding-top:10px}
  #case-dialog .gallery-bar>p{font-size:11px}
  #case-dialog .gallery-paging{gap:6px}
  #case-dialog .gallery-paging>span{font-size:10px}
  #case-dialog .gallery-thumbs>button{flex-basis:66px;width:66px}
  .case-afterword{padding-top:20px}
  .case-utility-row{padding-top:8px;padding-bottom:18px}
  .case-inquire{gap:16px}
  .case-colophon dl{grid-template-columns:1fr;gap:12px}
  .case-colophon dl>div{display:grid;grid-template-columns:72px 1fr;gap:16px}
  .case-colophon dt{margin:0;line-height:1.7}
  .case-companion{gap:12px}
  .case-companion>strong{font-size:13px}
  .case-companion>span{font-size:10px}
  .case-companion i{padding-left:8px}
  .case-turnpage{gap:18px;padding-block:22px}
  .case-previous{flex-basis:26px;font-size:21px}
  .case-next{gap:16px}
  .case-next-copy strong{font-size:20px}
  .case-next img{width:68px;height:56px}
  .case-next-arrow{font-size:24px}
  .case-concept-spread{grid-template-columns:1fr}
  .case-concept-spread>.portfolio-art{aspect-ratio:4/3}
  #projects .portfolio-featured .case-open{display:block}
  #projects .portfolio-featured .portfolio-card-copy{padding:20px 0 0}
  #projects .portfolio-featured .portfolio-card-copy h3{font-size:29px;margin:10px 0 14px}
  #projects .portfolio-card-copy h3{font-size:27px}
  #projects .portfolio-featured .portfolio-card-foot{margin-top:18px;padding-top:12px}
}
@media(max-width:380px){
  #case-dialog{--case-gutter:18px}
  #case-dialog #case-dialog-title{font-size:40px;gap:6px 14px}
  #case-dialog-title>small{font-size:15px}
  .case-next img{display:none}
  .case-companion{align-items:flex-start;flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){.case-next-arrow,.case-companion i,.case-colophon>summary>span{transition:none}}