/* An editorial project gallery with in-place category filtering. */
.shell.portfolio-page{background:#f4f1eb}
.portfolio-page>#footer{display:none}
.portfolio-page>header{background:#e2ebef;border-bottom:1px solid #cbd8de}
.portfolio-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:360px;padding:64px var(--page-inset);overflow:hidden;background:#7294a6;color:#fff}
.portfolio-hero-image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.portfolio-hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#173d55bd,#264c6260 55%,#264c620a)}
.portfolio-hero h1{font:400 clamp(48px,6vw,80px)/1.1 var(--font-heading);letter-spacing:-.025em;margin:0 0 20px}
.portfolio-hero p{font:400 18px/1.6 var(--font-heading);max-width:48ch;color:#f3f8fa;text-shadow:0 1px 8px #15344550}
.portfolio-body{padding:32px var(--page-inset) 60px;background:#f2ece3}
.portfolio-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:18px}
.portfolio-filters button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;border:1px solid #d1d8d9;border-radius:30px;padding:10px 18px;font:400 13px/1.4 var(--font-body);color:#40525b;transition:background .15s ease,color .15s ease}
.portfolio-filters button span{font-size:11px;font-variant-numeric:tabular-nums}
.portfolio-filters button:hover{background:#e2ebef}
.portfolio-filters button[aria-pressed=true]{background:#7194a8;border-color:#7194a8;color:#fff}
.portfolio-filters button:focus-visible{outline:2px solid #294e62;outline-offset:3px}
.portfolio-status{font-size:12px;color:#607780;line-height:1.5;margin:0 0 24px}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 24px;align-items:start}
.portfolio-card{min-width:0;position:relative}
.portfolio-image{aspect-ratio:1.42;background:#dce6eb;border-radius:4px;overflow:hidden}
.portfolio-image img{width:100%;height:100%;object-fit:contain}
.portfolio-card h2{font:400 clamp(20px,1.8vw,25px)/1.25 var(--font-heading);letter-spacing:-.015em;margin:15px 0 9px;color:#203e4e}
.portfolio-card p{font:400 14px/1.65 var(--font-body);color:#56646a;max-width:48ch}
.portfolio-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.portfolio-tags span{display:inline-block;border-radius:20px;background:#e0e8eb;color:#49616d;font:400 11px/1.5 var(--font-body);padding:6px 12px}
.portfolio-coming{cursor:default}
.portfolio-coming .portfolio-card-content{opacity:.36}
.portfolio-coming .upcoming-overlay{background:#e7eef140;color:#2a4c5d;border-radius:4px}
.portfolio-coming:hover .upcoming-overlay,.portfolio-coming:focus-visible .upcoming-overlay{opacity:1}
.portfolio-coming:focus-visible{outline:2px solid #527589;outline-offset:6px}
@media(max-width:1000px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-filters{gap:8px}.portfolio-filters button{padding:10px 14px}.portfolio-hero{min-height:320px}}
@media(max-width:600px){.portfolio-hero{min-height:290px;padding:40px 24px;align-items:flex-end}.portfolio-hero-image{object-position:58% center}.portfolio-hero h1{font-size:48px}.portfolio-hero p{font-size:16px}.portfolio-hero p br{display:none}.portfolio-body{padding:24px 20px 40px}.portfolio-filters{justify-content:flex-start}.portfolio-filters button{font-size:12px;gap:8px;padding:9px 12px}.portfolio-grid{grid-template-columns:1fr;gap:32px}.portfolio-card h2{font-size:24px}.portfolio-card p{font-size:15px}}
@media(hover:none){.portfolio-coming .upcoming-overlay{opacity:1}}
@media(prefers-reduced-motion:reduce){.portfolio-filters button{transition:none}}

/* Extended Eventer canvas fits the frame with all lettering visible. */
.portfolio-image:has(img[src="assets/eventer-extended.png"]){background:#aec4d5}