html{scroll-padding-top:105px}
@scope (.portfolio-content){
.portfolio-hero{padding:85px 0 65px;background:var(--cream);overflow:hidden}.portfolio-hero .wrap{position:relative}.portfolio-hero h1{position:relative;z-index:1;font-size:clamp(40px,5.3vw,76px);max-width:960px}.portfolio-hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:1}.portfolio-hero-bottom p{margin:0;font-size:15px}.glass-count{border:1px solid #fff9;background:#ffffff60;backdrop-filter:blur(16px);border-radius:40px;padding:15px 24px;box-shadow:inset 0 1px 1px #fff,0 8px 30px #22200008;font-size:9px;letter-spacing:1px;display:flex;gap:14px;align-items:center}.glass-count strong{font:800 27px Montserrat;color:var(--red)}.glass-count>span{font-size:25px;color:var(--red)}.hero-orb{position:absolute;right:0;top:-120px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff5,#cd212220 65%,#cd212204);border:1px solid #fff9;box-shadow:inset 12px 10px 50px #fff8;transform:rotate(-20deg)}.portfolio-work{padding-top:35px;padding-bottom:75px}.preview-note{font-size:10px;color:#817b75;line-height:1.7;margin-bottom:30px;max-width:900px}.preview-note>span{color:var(--red);font-weight:800;letter-spacing:1px;margin-right:12px}.filter-shell{position:sticky;top:78px;z-index:15;margin:0 -8px;padding:8px;border-radius:32px;background:linear-gradient(135deg,#f7f4f0c9,#ffffff8c);border:1px solid #fff;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:0 10px 35px #27221a12,inset 0 1px 0 #fff,inset 0 -1px 0 #cbc4bc70}.portfolio-filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;align-items:stretch;padding:2px;overscroll-behavior-inline:contain}.portfolio-filters button{flex:0 0 auto;border:1px solid transparent;background:transparent;color:#4d4a46;padding:12px 16px;border-radius:24px;font:600 10px Montserrat;cursor:pointer;white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s}.portfolio-filters button:hover{background:#fff8}.portfolio-filters button[aria-selected="true"]{background:linear-gradient(140deg,#e94b4be8,#b91419e8);border-color:#ffffff85;color:white;box-shadow:inset 0 1px 1px #fff9,0 3px 10px #b31b1c25}.portfolio-filters button span{font-size:8px;margin-left:6px;opacity:.7}.portfolio-filters button:focus-visible,.metro-tile:focus-visible{outline:3px solid var(--red);outline-offset:3px}.results-line{display:flex;justify-content:space-between;align-items:center;margin:28px 0 20px}.results-line p{margin:0;font-size:11px}.results-line>span{font-size:9px;font-weight:700;letter-spacing:1px;color:#888}.metro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:300px;gap:22px;grid-auto-flow:dense}.metro-tile{position:relative;overflow:hidden;border-radius:22px;background:#ddd;isolation:isolate;transition:box-shadow .4s,transform .4s;animation:portfolio-in .55s ease both}.metro-tile.wide{grid-column:span 2}.metro-tile.tall{grid-row:span 2}.metro-tile[hidden]{display:none}.metro-tile img{height:100%;width:100%;object-fit:cover;transition:transform .8s,filter .6s}.metro-tile:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0003,transparent 40%,#0006);pointer-events:none;z-index:0}.metro-tile:hover img{transform:scale(1.045)}.metro-tile:hover{box-shadow:0 16px 35px #2222}.tile-index{position:absolute;top:20px;left:20px;color:white;padding:7px 12px;background:#1c1c1c35;border:1px solid #ffffff40;backdrop-filter:blur(12px);border-radius:20px;font-size:8px;letter-spacing:1.5px;z-index:1}.glass-caption{position:absolute;bottom:15px;left:15px;right:15px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:white;padding:18px 20px;border-radius:17px;background:linear-gradient(120deg,#ffffff35,#ffffff15);border:1px solid #ffffff65;backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);box-shadow:inset 0 1px 0 #ffffff50,0 4px 20px #0002;z-index:1}.tile-category{font-size:8px;letter-spacing:1.2px;text-transform:uppercase;display:block;margin-bottom:7px}.glass-caption h2{font:700 22px Montserrat;letter-spacing:-.7px;line-height:1.2;margin:0;color:white}.glass-caption p{font-size:10px;color:#ffffffe0;margin:8px 0 0}.tile-arrow{width:36px;height:36px;border:1px solid #fff7;background:#ffffff1c;border-radius:50%;display:grid;place-items:center;font-size:24px;flex-shrink:0}.portfolio-outro{padding:75px 0;background:var(--cream)}.portfolio-outro h2{color:var(--ink)}.project-top{padding-top:45px}.back-link{font:600 11px Montserrat;color:var(--red)}.project-heading{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:50px 0 35px}.project-heading h1{font-size:clamp(40px,5vw,66px)}.project-sample{padding:15px 22px;border:1px solid #e3ddd5;border-radius:30px;font-size:9px;letter-spacing:1px;color:#888;text-align:center}.project-cover{height:550px;width:100%;object-fit:cover;border-radius:24px}.project-overview{display:grid;grid-template-columns:1.3fr 1fr;gap:100px;padding:65px 0}.project-overview h2{color:var(--ink);font-size:36px}.project-overview p{font-size:14px}.project-overview dl{margin:0}.project-overview dl>div{border-bottom:1px solid #e4ded7;padding:17px 0}.project-overview dt{font:700 9px Montserrat;letter-spacing:1.5px;color:var(--red)}.project-overview dd{margin:6px 0 0;font-size:14px;color:var(--ink)}.project-overview dd small{display:block;font-size:10px;color:#888}.project-gallery{padding-bottom:65px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.detail-grid figure{margin:0}.detail-grid img{height:400px;border-radius:20px}.detail-grid figcaption{font-size:10px;color:#999;margin-top:12px}.video-section{padding-bottom:65px}.video-section h2{color:var(--ink)}#youtube-preview{max-width:800px;margin:25px 0}#youtube-preview label{font-size:11px;font-weight:700;display:block;margin-bottom:8px}#youtube-preview>div{display:flex;gap:10px}#youtube-url{flex:1;min-width:0;border:1px solid #d8d1c9;background:var(--cream);border-radius:8px;padding:14px;font:13px 'Open Sans'}#youtube-preview button{border:0;background:var(--red);color:white;padding:14px 20px;border-radius:8px;font:700 11px Montserrat;cursor:pointer}#video-error{color:var(--red);font-size:11px;margin:8px 0}.video-player{aspect-ratio:16/9;border-radius:24px;background:#22252a;overflow:hidden}.video-player iframe{border:0;width:100%;height:100%}.video-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;gap:12px}.video-placeholder>span{font-size:70px;color:#f16962}.video-placeholder strong{font-family:Montserrat}.video-placeholder small{font-size:11px;color:#aab}.next-project{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-top:35px;padding-bottom:65px;border-top:1px solid #ddd}.next-project h2{font-size:30px;color:var(--ink);margin:0}
@keyframes portfolio-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:850px){.metro-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:290px}.portfolio-hero h1{font-size:48px}.project-overview{gap:40px}.project-cover{height:420px}.glass-caption{padding:15px}.glass-caption h2{font-size:19px}.project-heading{gap:20px}.project-sample{font-size:8px}}
@media(max-width:550px){.portfolio-hero{padding:50px 0}.portfolio-hero h1{font-size:39px}.portfolio-hero-bottom{align-items:flex-start;flex-direction:column;gap:20px}.hero-orb{width:250px;height:250px;right:-100px}.portfolio-work{padding-top:25px}.metro-grid{grid-template-columns:1fr;grid-auto-rows:350px;gap:18px}.metro-tile.wide{grid-column:auto}.metro-tile.tall{grid-row:auto}.filter-shell{top:76px;margin:0 -12px}.portfolio-filters button{padding:12px}.results-line>span{display:none}.glass-caption h2{font-size:23px}.project-heading{align-items:flex-start;flex-direction:column;padding-top:30px}.project-cover{height:330px;border-radius:18px}.project-overview,.detail-grid{grid-template-columns:1fr;gap:30px}.project-overview{padding:40px 0}.detail-grid img{height:330px}.next-project{align-items:flex-start;flex-direction:column}.next-project h2{font-size:27px}#youtube-preview>div{flex-direction:column}.video-placeholder strong{font-size:12px}.video-placeholder small{font-size:9px}.video-placeholder>span{font-size:40px}}
@media(prefers-reduced-motion:reduce){.metro-tile,.metro-tile img{animation:none;transition:none}}
}
/* Image-first captions and a soft illuminated hover edge. */
@scope (.portfolio-content){
.metro-tile{overflow:visible;isolation:isolate;border-radius:22px}
.metro-tile img{border-radius:22px}
.metro-tile:after{border-radius:22px;background:linear-gradient(180deg,#00000020,transparent 30%,transparent 65%,#00000035)}
.metro-tile:before{content:'';position:absolute;inset:-2px;border-radius:24px;pointer-events:none;opacity:0;box-shadow:0 0 0 1px #e94b4b80,0 0 22px #cd212240,0 12px 40px #cd212225;transition:opacity .4s ease;z-index:-1}
.metro-tile:hover:before,.metro-tile:focus-visible:before{opacity:1}
.metro-tile:hover{transform:translateY(-3px);box-shadow:0 10px 30px #22200015}
.metro-tile:hover img{transform:none;filter:brightness(1.04)}
.glass-caption{padding:11px 14px;left:12px;right:12px;bottom:12px;border-radius:13px;background:linear-gradient(120deg,#22252a70,#22252a40);backdrop-filter:blur(12px) saturate(125%);-webkit-backdrop-filter:blur(12px) saturate(125%);border-color:#ffffff50;transition:background .4s,border-color .4s,box-shadow .4s}
.glass-caption h2{font-size:17px;letter-spacing:-.4px;line-height:1.25}
.tile-category{font-size:7px;letter-spacing:1px;margin-bottom:4px}
.glass-caption p{display:none}
.tile-arrow{width:29px;height:29px;font-size:20px}
.tile-index{top:14px;left:14px;font-size:7px;padding:5px 9px;background:#22252a30}
.metro-tile:hover .glass-caption{border-color:#ffffff90;background:linear-gradient(120deg,#22252a85,#4a252a60);box-shadow:inset 0 1px 0 #ffffff50,0 0 15px #cd212225}
@media(max-width:550px){.glass-caption h2{font-size:18px}.glass-caption{padding:12px 14px}.tile-category{font-size:8px}}
@media(prefers-reduced-motion:reduce){.metro-tile:hover{transform:none}.metro-tile:before,.glass-caption{transition:none}}
}