dialog.projects-panel{width:min(1400px,96vw);max-height:94svh}
.projects-panel .panel-inner{padding:48px 52px 30px}
.projects-panel h2{font-size:clamp(36px,4vw,60px);margin:16px 0 30px}
.project-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:start}
.project-media{position:relative;margin:0;aspect-ratio:4/3;background:#26392e;overflow:hidden;color:#f6f3ed}
.project-idle{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(ellipse at 15% 95%,#77836155,transparent 65%),#26392e;text-align:center;padding:25px}
.project-idle[hidden]{display:none}
.project-idle>span:not(.project-monogram){font-size:9px;letter-spacing:3px}
.project-monogram{font:italic 100px/1.2 'Cormorant Garamond',Georgia,serif}
.project-idle p{font:italic 24px/1.3 'Cormorant Garamond',Georgia,serif;color:#e0e5d6}
.project-idle small{font-size:10px;letter-spacing:1px;opacity:.65}
.project-video,.project-cover{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}
.project-video{object-fit:contain;background:#17261e}
.project-video{object-fit:contain}
.project-cover{opacity:0;transition:opacity .3s;pointer-events:none}
.has-project .project-cover{opacity:1}
.project-caption{position:absolute;bottom:0;left:0;right:0;padding:48px 22px 20px;background:linear-gradient(transparent,#142119b3);font-size:9px;letter-spacing:1.6px;pointer-events:none}
.project-video-toggle{position:absolute;top:15px;left:15px;background:#f6f3eddd;color:#26392e;border:0;padding:9px 12px;font-size:11px;cursor:pointer}
.project-index-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:var(--muted);padding:4px 0 24px;border-bottom:1px solid var(--rule)}
.project-row{display:flex;align-items:center;gap:18px;width:100%;padding:27px 0;border:0;border-bottom:1px solid var(--rule);background:transparent;color:var(--ink);text-align:left}
.project-order{align-self:flex-start;margin-top:8px;font-size:10px;color:var(--muted)}
.project-name-wrap{display:flex;flex-direction:column;gap:12px}
.project-name{font:400 clamp(28px,3vw,44px)/1.1 'Cormorant Garamond',Georgia,serif;transition:transform .25s,color .25s}
.project-category{font-size:9px;letter-spacing:1.2px;color:var(--muted)}
.project-row-arrow{margin-left:auto;font-size:25px;opacity:.35;transition:transform .25s,opacity .25s}
.project-row.is-selected .project-name{transform:translateX(6px);color:#75815c}
.project-row.is-selected .project-row-arrow{transform:translate(3px,-3px);opacity:1}
.project-index .project-instruction{font-size:11px;line-height:1.7;margin-top:22px;color:var(--muted)}
.projects-panel .back{margin-top:30px;font-size:12px;padding:13px 18px}
@media(pointer:fine){.projects-panel,.projects-panel button{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 28l3-10L23 2l7 7-16 16z' fill='%23f6f3ed' stroke='%2325392e' stroke-width='1.5'/%3E%3Cpath d='M7 18l7 7M20 5l7 7M10 21L24 7' stroke='%2325392e' stroke-width='1.4'/%3E%3Cpath d='M4 28l2-6 4 4z' fill='%2325392e'/%3E%3C/svg%3E") 4 28,crosshair}}
@media(max-width:850px){.projects-panel .panel-inner{padding:54px 24px 28px}.project-layout{gap:28px;grid-template-columns:1fr}.project-media{aspect-ratio:16/10}.project-row{padding:23px 0}.project-name{font-size:35px}.projects-panel h2{margin-top:12px}.project-caption{font-size:8px}}
.project-detail{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);gap:28px;min-height:440px}.detail-video-wrap{position:relative;background:#16261d;min-height:420px}.detail-video{width:100%;height:100%;min-height:420px;object-fit:contain}.detail-video-label{position:absolute;left:18px;bottom:15px;color:#f6f3ed;font-size:9px;letter-spacing:1.5px}.detail-gallery{min-width:0}.detail-gallery-heading{display:flex;justify-content:space-between;border-bottom:1px solid var(--rule);padding:4px 0 14px;color:var(--muted);font-size:10px;letter-spacing:1.8px}.detail-photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding-top:14px;max-height:450px;overflow:auto}.detail-photo{position:relative;border:0;padding:0;background:#e4e7df;aspect-ratio:4/3;cursor:pointer;overflow:hidden}.detail-photo img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.detail-photo:hover img{transform:scale(1.05)}.detail-photo span{position:absolute;bottom:7px;left:8px;color:#fff;font-size:9px;text-shadow:0 1px 4px #000}.project-lightbox{width:min(94vw,1300px);height:min(92svh,900px);padding:54px 25px 25px;background:#17261ef2;border:0}.project-lightbox::backdrop{background:#07120dcc;backdrop-filter:blur(8px)}.project-lightbox img{width:100%;height:100%;object-fit:contain}.lightbox-close{position:absolute;right:14px;top:10px;border:0;background:none;color:#f6f3ed;font-size:27px;cursor:pointer}@media(max-width:850px){.project-detail{grid-template-columns:1fr;gap:24px}.detail-video-wrap,.detail-video{min-height:250px}.detail-photo-grid{max-height:300px}}
.project-lightbox{padding:clamp(2.5rem,6vw,5rem);background:rgba(15,28,22,.96);border:1px solid rgba(255,255,255,.2);max-width:min(92vw,1100px);max-height:92vh}.project-lightbox img{max-width:82vw;max-height:78vh;object-fit:contain}.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:50%;width:3rem;height:3rem;font-size:2.4rem;line-height:1;cursor:pointer}.lightbox-prev{left:.8rem}.lightbox-next{right:.8rem}.lightbox-counter{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);color:#fff;font-size:.85rem}.lightbox-close{position:absolute;top:.8rem;right:.8rem;z-index:2}
.project-cover,.detail-slideshow img{transition:opacity .7s ease}.is-fading{opacity:0}

.lightbox-photo-name{position:absolute;right:24px;bottom:16px;max-width:40%;color:#f6f3ed;font-size:11px;line-height:1.4;text-align:right;overflow-wrap:anywhere;background:rgba(15,28,22,.65);padding:5px 8px;border-radius:3px}.lightbox-photo-name:empty{display:none}@media(max-width:600px){.lightbox-photo-name{right:12px;bottom:12px;max-width:38%;font-size:10px}}
/* Lightbox uses a light gallery surface so transparent PNG catalogue artwork stays clean. */
dialog.project-lightbox{background:#fffdf8;border:1px solid #cbd0c3;box-shadow:0 22px 70px rgba(25,48,36,.2)}
dialog.project-lightbox::backdrop{background:rgba(246,243,237,.9);backdrop-filter:blur(8px)}
.project-lightbox img{background:#fff}
.project-lightbox .lightbox-prev,.project-lightbox .lightbox-next{background:#193b2c;color:#fffdf8}
.project-lightbox .lightbox-counter{color:#25392e}
.project-lightbox .lightbox-close{color:#25392e}
.project-lightbox .lightbox-photo-name{color:#25392e;background:rgba(255,253,248,.9);border:1px solid #cbd0c3}
/* Keep the large project preview light as well as the image lightbox. */
.projects-panel .project-media,.projects-panel .detail-slideshow{background:#fffdf8}
.projects-panel .project-cover,.projects-panel .detail-slideshow img{background:#fff}
.projects-panel .detail-slideshow .detail-video-label{color:#25392e;background:rgba(255,253,248,.9);padding:5px 8px}
/* Larger portfolio windows and detail media. */
dialog.projects-panel,dialog.practice-panel{width:min(1680px,94vw);max-width:94vw;max-height:96svh}
.projects-panel .panel-inner,.practice-panel .panel-inner{padding:48px clamp(24px,3.5vw,72px) 32px}
.projects-panel h2,.practice-panel h2{font-size:clamp(36px,4.2vw,80px);line-height:1.05;margin:16px 0 30px;overflow-wrap:anywhere}
.projects-panel .project-detail{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.projects-panel .detail-video-wrap{min-height:0;height:clamp(420px,65svh,850px)}
.projects-panel .detail-video{display:block;min-height:0;height:100%;width:100%;object-fit:contain}
.projects-panel .detail-photo-grid{max-height:65svh}
@media(max-width:850px){
 dialog.projects-panel,dialog.practice-panel{width:96vw;max-width:96vw;max-height:96svh}
 .projects-panel .panel-inner,.practice-panel .panel-inner{padding:56px 18px 26px}
 .projects-panel .project-detail{grid-template-columns:1fr}
 .projects-panel .detail-video-wrap{height:clamp(240px,50svh,520px)}
 .projects-panel .detail-photo-grid{max-height:45svh}
 .projects-panel h2,.practice-panel h2{font-size:clamp(32px,6vw,50px)}
}