/* Highlights: articulated graphite frames. Existing content and gallery routes preserved. */
#work.highlights{--frame-edge:#697e87;--frame-light:#43dcf5;--frame-active:#a2f5ff;--frame-ink:#0d1419;background-image:none;padding-top:72px;padding-bottom:88px}
.highlights-top{display:flex;align-items:center;justify-content:space-between;gap:32px;max-width:1260px;margin:0 auto 36px}
.highlights-top .highlights-heading{margin:0;letter-spacing:-.04em}
.gallery-entry{position:relative;display:inline-flex;align-items:center;gap:24px;min-height:48px;background:#43dcf5;color:#101a20;border:0;border-radius:0;padding:15px 24px;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);font-size:15px;font-weight:600;white-space:nowrap;transition:background .2s;animation:gallery-invite 3.6s ease-in-out infinite}
.gallery-entry:hover,.gallery-entry:focus-visible{background:#a2f5ff;animation:none}
.gallery-entry svg{transition:transform .25s ease}
.gallery-entry:hover svg,.gallery-entry:focus-visible svg{transform:translateX(4px)}
@keyframes gallery-invite{0%,100%{background:#43dcf5}50%{background:#a2f5ff}}
.gallery-entry svg,.catalogue-explore svg,.catalogue-caption svg{width:18px;height:18px;flex:none}
#work .highlights-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;max-width:1260px;margin-inline:auto;align-items:stretch}
#work .highlight-card{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;padding:26px 24px 28px;border:0;border-radius:0;background:transparent;box-shadow:none;--shell:polygon(24px 0,38% 0,calc(38% + 10px) 8px,calc(100% - 60px) 8px,calc(100% - 52px) 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,62% 100%,calc(62% - 10px) calc(100% - 7px),20px calc(100% - 7px),0 calc(100% - 27px),0 24px)}
#work .highlight-card::before,#work .highlight-card::after{content:"";position:absolute;pointer-events:none;clip-path:var(--shell)}
#work .highlight-card::before{z-index:0;inset:0;background:linear-gradient(125deg,#43dcf5 0%,#43dcf5 9%,#42545e 9.2%,#26353e 82%,#43dcf5 82.2%,#43dcf5 100%);transition:background .25s}
#work .highlight-card::after{z-index:0;inset:1px;background:linear-gradient(120deg,#1b272f 0%,#111a20 40%,#0d1419 100%)}
.catalogue-header{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;min-height:86px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid #3c4d57}
.catalogue-header::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;background:var(--frame-light);clip-path:polygon(0 0,68% 0,68% 100%,0 100%,0 0,76% 0,86% 0,86% 100%,76% 100%,76% 0,94% 0,100% 0,100% 100%,94% 100%,94% 0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
#work .catalogue-heading h3{font:400 clamp(24px,2.2vw,30px)/1.12 var(--font-display);letter-spacing:-.025em;text-wrap:balance;margin:0 0 9px;max-width:24ch}
.catalogue-place{display:block;font:500 10px/1.5 var(--font-body);letter-spacing:.08em;color:#b5cbd5}
.catalogue-explore{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 0 10px 12px;border:0;border-radius:0;font:500 12px/1.4 var(--font-body);white-space:nowrap;color:#d5eaf3}
.catalogue-explore svg{box-sizing:content-box;padding:8px;border:1px solid #677e89;background:#20303a;transition:background .2s,color .2s}
.catalogue-explore:hover svg{background:var(--frame-light);color:#0d1419}
.catalogue-content{display:flex;flex-direction:column;flex:1;min-width:0}
.catalogue-media{position:relative;display:block;aspect-ratio:16/10;width:100%;flex-shrink:0;min-width:0;border-radius:0;touch-action:manipulation}
.catalogue-photo{position:absolute;inset:5px;display:block;overflow:hidden;border-radius:0;background:#0b1015;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
#work .catalogue-photo img{width:100%;height:100%;margin:0;aspect-ratio:auto;object-fit:cover;transition:none}
#work .catalogue-photo--screen img{object-fit:contain;background:#080a10}
.catalogue-media::before,.catalogue-media::after{content:"";position:absolute;z-index:1;pointer-events:none;width:44px;height:44px;border:1px solid var(--frame-light);transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .3s}
.catalogue-media::before{left:0;top:0;border-right:0;border-bottom:0;clip-path:polygon(0 0,100% 0,100% 7px,7px 7px,7px 100%,0 100%);transform:translate(-3px,-3px)}
.catalogue-media::after{right:0;bottom:0;border-left:0;border-top:0;clip-path:polygon(0 calc(100% - 7px),calc(100% - 7px) calc(100% - 7px),calc(100% - 7px) 0,100% 0,100% 100%,0 100%);transform:translate(3px,3px)}
.catalogue-caption{position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:1;gap:8px;padding:20px 0 0}
#work .catalogue-caption p{font:400 14px/1.65 var(--font-body);color:#c3d3dc;margin:0 0 4px;max-width:70ch}
#work .catalogue-caption .text-link{display:inline-flex;align-items:center;gap:10px;margin-top:auto;font:500 12px/1.5 var(--font-body);padding:8px 0;min-height:44px;border-color:#718c99;white-space:nowrap}
.catalogue-caption .text-link:hover{color:#fff;border-color:var(--frame-light)}
#work a:focus-visible{outline:2px solid var(--frame-light);outline-offset:5px}
#work .gallery-entry:focus-visible{outline-offset:-5px;outline-color:#101a20}
#work ::selection{background:#beeafa;color:#0d1419}
@media(hover:hover){
 #work .highlight-card:hover::before{background:linear-gradient(125deg,#a2f5ff 0%,#a2f5ff 9%,#688895 9.2%,#334d5a 82%,#a2f5ff 82.2%,#a2f5ff 100%)}
 #work .highlight-card:hover .catalogue-media::before,#work .highlight-card:hover .catalogue-media::after{transform:translate(0,0);border-color:var(--frame-active)}
 #work .highlight-card:hover .catalogue-header::after{transform:scaleX(1.6);background:var(--frame-active)}
}
#work .highlight-card:focus-within .catalogue-media::before,#work .highlight-card:focus-within .catalogue-media::after{transform:translate(0,0);border-color:var(--frame-active)}
@media(max-width:800px){
 #work .highlights-grid{grid-template-columns:minmax(0,1fr);gap:28px}
 .catalogue-header{min-height:0}
 #work .catalogue-heading h3{font-size:28px}
}
@media(max-width:700px){
 #work.highlights{padding:56px 20px 72px}
 .highlights-top{align-items:flex-start;flex-direction:column;gap:24px;margin-bottom:32px}
 .highlights-top .highlights-heading{font-size:56px}
 .gallery-entry{gap:18px;padding:13px 20px}
 #work .highlight-card{padding:26px 18px 28px}
 .catalogue-header{grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-bottom:18px}
 .catalogue-heading{display:contents}
 #work .catalogue-heading h3{grid-column:1 / -1;grid-row:1;font-size:28px;max-width:none;margin:0}
 .catalogue-place{grid-column:1;grid-row:2;align-self:center}
 .catalogue-explore{grid-column:2;grid-row:2}
 .catalogue-caption{padding-top:18px}
 #work .catalogue-caption p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
 #work .highlight-card::before,#work .highlight-card::after,#work .catalogue-media::before,#work .catalogue-media::after,#work .catalogue-header::after,#work .catalogue-explore svg,#work .gallery-entry{transition:none!important;animation:none!important}
 #work .catalogue-media::before,#work .catalogue-media::after{transform:none!important}
 #work .catalogue-header::after{transform:none!important}
}

/* Keep content above both shell plates in WebKit compositing. */
#work .highlight-card > .catalogue-header,#work .highlight-card > .catalogue-content{position:relative;z-index:1}

/* Short titles carry each Highlight; longer stories stay in the gallery. */
#work .catalogue-heading h3{margin-bottom:0}
#work .catalogue-header:not(:has(.catalogue-explore)){grid-template-columns:minmax(0,1fr)}
#work .catalogue-header:not(:has(.catalogue-explore)) h3{max-width:none}

@media(prefers-reduced-motion:reduce){.gallery-entry svg{transition:none!important;transform:none!important}}