/* Projects gallery only; the heading and page animation styles live in style.css. */
#work{--showcase-accent:#f05a3b;padding:120px 0 80px}
#work .showcase-grid{width:min(1200px,calc(100% - 280px));max-width:none;margin-inline:auto}
#work .projects-intro{margin-bottom:42px}
#work .projects-title,#mask-copy .projects-title{font-size:clamp(104px,9vw,136px);line-height:.95;min-height:.95em;letter-spacing:-.035em}
#work .projects-title{margin-bottom:32px}
#work .projects-question{display:grid;grid-template-columns:1fr;align-items:center;padding:0 0 0 8px;text-align:left;font:600 clamp(27px,2.25vw,32px)/1.2 Avant,Arial,sans-serif;letter-spacing:-.035em;color:var(--cream)}
#work .projects-question span{grid-area:1/1;transition:opacity .38s ease,transform .38s var(--ease)}
#work .question-answer{opacity:0;transform:translateY(9px);color:var(--showcase-accent)}
#work .projects-question:is(:hover,:focus-visible,.is-revealed) .question-front{opacity:0;transform:translateY(-9px)}
#work .projects-question:is(:hover,:focus-visible,.is-revealed) .question-answer{opacity:1;transform:none}
@media(hover:hover){#work .projects-intro:hover .question-front{opacity:0;transform:translateY(-9px)}#work .projects-intro:hover .question-answer{opacity:1;transform:none}}
#work .projects-question:focus-visible{outline:2px solid var(--showcase-accent);outline-offset:6px}
#work .showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:32px}
#work .showcase-item{position:relative;min-width:0;isolation:isolate}
#work .showcase-item::before,#work .showcase-item::after{content:"";position:absolute;inset:-9px;pointer-events:none;border:1px solid transparent;border-radius:5px;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude}
#work .showcase-item::before{z-index:-1;-webkit-mask:none;mask:none;border-color:rgba(226,214,195,.22);background:linear-gradient(135deg,rgba(255,246,230,.13),rgba(255,246,230,.035) 45%,rgba(240,90,59,.065));backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.035),0 12px 32px rgba(0,0,0,.2);transition:border-color .3s ease,box-shadow .3s ease}
#work .showcase-item::after{border-width:2px;background:conic-gradient(from var(--star-angle),transparent 0 320deg,#f05a3b24 336deg,#f05a3b 351deg,#ffe2c9 356deg,transparent 360deg) border-box;animation:showcase-star-orbit 4s linear infinite}
#work .showcase-item:is(:hover,:focus-within)::before{border-color:rgba(240,90,59,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.06),0 12px 32px rgba(0,0,0,.25)}
@property --star-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes showcase-star-orbit{to{--star-angle:360deg}}
#work .showcase-media{display:block;width:100%;padding:0;text-align:left;overflow:hidden;background:#111;color:var(--cream);border-radius:3px}
#work .showcase-figure{display:block;margin:0;aspect-ratio:16/10;overflow:hidden;background:#0d0d0d}
#work .showcase-figure img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
#work .showcase-copy{padding-top:17px}
#work .showcase-copy h3{margin:0}
#work .showcase-copy h3 button{display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:100%;padding:0;text-align:left;font:600 clamp(30px,2.7vw,36px)/1.15 Avant,Arial,sans-serif;letter-spacing:-.045em;color:var(--cream)}
#work .showcase-description{font:16px/1.55 Arial,sans-serif;color:#c0b5a6;margin:9px 0 13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#work .showcase-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px}
#work .showcase-links :is(a,button){display:inline-flex;align-items:center;gap:5px;padding:4px 0;min-height:30px;font:13px/1.4 Arial,sans-serif;color:var(--cream);text-decoration:none;transition:color .25s ease}
#work .showcase-links :is(a,button) span{font-size:15px;color:var(--showcase-accent);transition:transform .3s var(--ease)}
#work .showcase-links :is(a,button):hover,#work .showcase-links :is(a,button):focus-visible{color:var(--showcase-accent)}
#work .showcase-links :is(a,button):hover span,#work .showcase-links :is(a,button):focus-visible span{transform:translate(2px,-2px)}
#work .showcase-actions{gap:8px 20px}
#work .showcase-actions :is(a,button){gap:9px;min-height:40px}
#work .showcase-actions :is(a,button) .glass-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid #d8cbb63d;border-radius:7px;background:#e3d6c10d;color:var(--cream);transition:border-color .25s ease,background .25s ease,color .25s ease}
#work .showcase-actions .glass-icon svg{width:17px;height:17px}
#work .showcase-actions a::after{content:"↗";display:inline-block;margin-left:1px;font:12px/1 Arial,sans-serif;color:#a99f90;transition:transform .3s var(--ease),color .25s ease}
#work .showcase-actions a:is(:hover,:focus-visible)::after{transform:translate(2px,-2px);color:var(--showcase-accent)}
#work .showcase-actions :is(a,button):is(:hover,:focus-visible) .glass-icon{border-color:#f05a3b70;background:#f05a3b14;color:#f2dfc8;transform:none}
#work .showcase-media:focus-visible{outline:2px solid var(--showcase-accent);outline-offset:4px}
#work :is(.showcase-copy h3 button,.showcase-links a,.showcase-links button,.case-close,.case-gallery-controls button):focus-visible{outline:2px solid var(--showcase-accent);outline-offset:4px}

/* A restrained, media-first case study in a native accessible dialog. */
html.project-case-open{overflow:hidden}
#work .case-dialog{box-sizing:border-box;width:min(1160px,calc(100vw - 64px));max-width:none;max-height:92svh;margin:auto;padding:0 28px 36px;background:#0d0d0d;color:var(--cream);border:1px solid #b7ab9830;border-radius:5px;overscroll-behavior:contain;scrollbar-color:#574a3c #0d0d0d}
#work .case-dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}
#work .case-dialog *{cursor:auto}
#work .case-dialog :is(button,a){cursor:pointer}
#work .case-toolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0;background:#0d0d0df2;font:10px/1.4 Arial,sans-serif;letter-spacing:1.5px;color:#9d9384}
#work .case-close{display:flex;align-items:center;gap:12px;padding:10px 0 10px 14px;font:13px/1.4 Arial,sans-serif;letter-spacing:0;color:var(--cream)}
#work .case-close span{font-size:22px;color:var(--showcase-accent)}
#work .case-gallery{margin-top:4px}
#work .case-slide[hidden]{display:none}
#work .case-figure{margin:0}
#work .case-figure :is(img,video){display:block;width:100%;height:auto;aspect-ratio:16/10;background:#131313;border-radius:3px}
#work .case-figure img{object-fit:cover;object-position:center top}
#work .case-figure img[src$="memorae-site-2026-10-22.png"]{object-fit:contain}
#work .case-figure video{object-fit:contain}
#work .case-figure figcaption{font:11px/1.5 Arial,sans-serif;color:#8d867b;margin-top:9px}
#work .case-gallery-controls{display:flex;flex-wrap:wrap;gap:20px;margin-top:18px}
#work .case-gallery-controls button{padding:4px 0 8px;border-bottom:1px solid transparent;text-align:left;font:12px/1.4 Arial,sans-serif;color:#9d9384;transition:color .25s,border-color .25s}
#work .case-gallery-controls button[aria-pressed=true]{color:var(--showcase-accent);border-color:var(--showcase-accent)}
#work .case-gallery-controls button:hover{color:var(--cream)}
#work .case-gallery-controls span{margin-left:7px}
#work .case-header{padding:38px 0 30px;border-bottom:1px solid var(--line)}
#work .case-header h2{font:600 clamp(36px,4vw,56px)/1.05 Avant,Arial,sans-serif;letter-spacing:-.05em;margin:0 0 10px}
#work .case-intro{font:17px/1.5 Arial,sans-serif;color:#aaa092}
#work .case-copy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 48px;margin-top:32px}
#work .case-copy h3{font:600 16px/1.4 Avant,Arial,sans-serif;letter-spacing:-.02em;margin:0 0 11px}
#work .case-copy p,#work .case-copy ul{font:15px/1.7 Arial,sans-serif;color:#aaa092;margin:0}
#work .case-copy p+p{margin-top:12px}
#work .case-copy ul{padding-left:18px}
#work .case-copy li{margin:4px 0}
#work .case-copy li::marker{color:var(--showcase-accent)}
#work .case-stack p{max-width:58ch}
#work .case-footer{padding-top:22px;margin-top:32px;border-top:1px solid var(--line)}
#work .case-slide:not([hidden]){animation:case-media-in .3s ease}
@keyframes case-media-in{from{opacity:.55}to{opacity:1}}
@media(max-width:900px){#work .projects-title,#mask-copy .projects-title{font-size:clamp(76px,10vw,104px)}#work .showcase-grid{column-gap:24px;row-gap:32px}}
@media(max-width:700px){
 #work{padding:80px 0 72px}
 #work .showcase-grid{width:calc(100% - 116px);margin-left:24px;margin-right:auto}
 #work .projects-title,#mask-copy .projects-title{font-size:clamp(48px,11vw,76px)}
 #work .projects-title{margin-bottom:28px}
 #work .projects-intro{margin-bottom:34px}
 #work .projects-question{font-size:clamp(22px,5.5vw,26px)}
 #work .showcase-grid{grid-template-columns:1fr;row-gap:32px}
 #work .showcase-copy{padding-top:14px}
 #work .showcase-copy h3 button{font-size:30px}
 #work .showcase-description{white-space:normal;font-size:15px;margin:7px 0 10px}
 #work .showcase-links{gap:5px 18px}
 #work .showcase-links :is(a,button){min-height:40px;font-size:13px}
 #work .case-dialog{width:calc(100vw - 20px);max-height:95svh;padding:0 16px 24px}
 #work .case-toolbar{padding:6px 0}
 #work .case-header{padding:28px 0 24px}
 #work .case-copy{grid-template-columns:1fr;gap:26px;margin-top:26px}
 #work .case-gallery-controls{gap:12px}
 #work .case-gallery-controls button{font-size:11px}
 #work .case-gallery-controls span{margin-left:4px}
}
@media(prefers-reduced-motion:reduce){#work *,#work *:before,#work *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}