@import url('fonts.css');
:root{--paper:#f5f4f0;--line:#deddd8;--muted:#757575;--condensed:'Barlow Condensed','Arial Narrow',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:#0b0b0b;font-family:Roboto,Arial,sans-serif;font-size:16px}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid #344e6e;outline-offset:5px}img{display:block;width:100%;height:100%;object-fit:cover}h1,h2,p{margin:0}a:hover .caption strong{text-decoration:underline}button:hover,a:hover{color:#555}.shell{max-width:1440px;margin:auto;border-left:1px solid #aaa;border-right:1px solid #aaa;min-height:100vh;background:repeating-linear-gradient(to right,transparent 0,transparent calc(28.6% - 1px),var(--line) calc(28.6% - 1px),var(--line) 28.6%,transparent 28.6%,transparent calc(56.4% - 1px),var(--line) calc(56.4% - 1px),var(--line) 56.4%,transparent 56.4%,transparent calc(83.3% - 1px),var(--line) calc(83.3% - 1px),var(--line) 83.3%,transparent 83.3%)}header{height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid #bbb}.brand{font:700 24px var(--condensed);letter-spacing:-.7px}nav{display:flex;gap:48px;height:100%;align-items:stretch}nav a{display:flex;align-items:center;position:relative;text-transform:uppercase;font-size:14px}nav a.active{font-family:var(--condensed);font-size:20px;font-weight:700}nav a.active:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:#334861}footer{min-height:75px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-top:1px solid var(--line);font-size:13px;text-transform:uppercase;color:#555}footer button{font-size:13px;text-transform:uppercase}.projects{position:relative;padding:0 32px 28px;min-height:calc(100vh - 172px)}.filters{position:absolute;top:130px;left:22px;width:calc(28.6% - 48px);z-index:2}.filters button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;font-size:15px;text-transform:uppercase;padding:8px 8px 8px 25px;position:relative;color:#626262}.filters button.active{font-weight:700;color:#111}.filters button.active:before{content:'•';position:absolute;left:0;font-size:23px}.filters button:first-child{font-size:19px;margin-bottom:6px}.filters small{font-size:14px}.project-hero{height:675px;position:relative;margin-right:-32px}.display{font:700 clamp(70px,8.5vw,126px)/.84 var(--condensed);letter-spacing:-4px;text-transform:uppercase}.project-hero h1{position:absolute;left:29.5%;top:44px;z-index:1}.count{font:600 68px/.9 var(--condensed);letter-spacing:-2px;color:#a2a2a2;display:block;margin-top:24px}.hero-image{position:absolute;left:55%;right:0;top:212px;bottom:12px}.hero-image img{object-position:center}.hero-caption{position:absolute;bottom:28px;right:47.5%;text-align:right;font-size:18px;line-height:1.4}.caption{font-size:18px;line-height:1.45}.caption span,.caption strong{display:block}.caption strong{font-weight:500}.caption .number{font-size:16px;font-weight:700}.mosaic{display:grid;grid-template-columns:1.95fr 1.2fr 1fr;grid-template-rows:350px 350px;gap:12px 22px}.tile{position:relative;min-width:0;overflow:hidden}.tile .caption{position:absolute;bottom:0;left:0;padding:22px 12px;background:var(--paper);min-width:40%}.tile.roami{grid-column:1;grid-row:1}.tile.roami .caption{clip-path:polygon(0 0,100% 34%,100% 100%,0 100%);padding-top:36px}.tile.ce7{grid-column:2/4;grid-row:1}.tile.ce7 .caption{left:auto;right:0;width:47%;padding:23px}.tile.tennis{grid-column:1;grid-row:2}.tile.color{grid-column:2;grid-row:2}.tile.visual{grid-column:3;grid-row:2;padding-top:38px}.tile.color .caption,.tile.visual .caption{width:100%;padding:12px 8px}.tile.color img{height:74%}.tile.visual img{height:73%}.filtered{margin-left:31%;padding:28px 0 0;min-height:690px}.filtered .display{font-size:84px;max-width:430px;line-height:.91;letter-spacing:-3px}.filtered .count{font-size:56px;margin:25px 0}.filtered-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:24px}.filtered-grid img{height:330px}.filtered-grid .caption{padding:12px 6px}.detail{padding:38px 30px 24px}.detail-top{display:grid;grid-template-columns:72% 28%;min-height:585px}.back{font-size:14px;text-transform:uppercase}.detail-number{margin-top:26px;font-size:24px}.detail h1{font:600 100px/1 var(--condensed);letter-spacing:-3px;margin-top:40px}.subtitle{font-size:40px;margin-top:8px}.description{max-width:460px;font-size:22px;line-height:1.32;margin:42px 0 24px}.visit{font-size:21px;font-weight:700;text-transform:uppercase}.metadata{padding-top:85px;display:grid;grid-template-columns:1fr 1.6fr;align-content:start;gap:28px;font-size:18px}.metadata small{display:block;text-transform:uppercase;color:#777;font-size:12px;margin-bottom:8px}.detail-images{display:grid;grid-template-columns:3fr 1fr;gap:22px}.detail-images>.main-image{height:740px}.detail-thumbs{display:grid;grid-template-rows:repeat(3,1fr);gap:12px}.detail-thumbs button{padding:0;overflow:hidden}.detail-thumbs img{max-height:238px}.detail-footer{width:100%;display:flex;justify-content:space-between;align-items:center}.grid-icon{font-size:30px;letter-spacing:3px}.about-top{display:grid;grid-template-columns:44% 56%;padding:22px 0 0 35px}.about-copy{display:flex;flex-direction:column;padding:50px 30px 70px 0}.eyebrow{font-size:26px;color:#777;margin-bottom:50px}.about-copy h1,.contact-copy h1{font-size:130px;font-weight:400;line-height:.85;letter-spacing:-7px}.about-copy .bio{margin-top:auto;padding-top:100px;max-width:470px;font-size:24px;line-height:1.3}.bio p+p{margin-top:30px}.portrait{height:990px}.strip{display:flex;justify-content:space-between;padding:32px 40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:#777;font-size:14px;text-transform:uppercase}.background{display:grid;grid-template-columns:35% 39% 26%;padding:44px 0 0 35px}.background h2{font-size:53px;font-weight:400;letter-spacing:-2px}.background .eyebrow{margin:25px 0 28px}.background img{height:355px}.background ul{list-style:none;line-height:1.9;text-transform:uppercase;color:#666;padding:15px 30px;font-size:15px}.notes{position:relative;padding:30px 34px 30px;min-height:calc(100vh - 172px)}.notes .filters{top:34px}.notes-content{margin-left:26%;}.notes h1{font-size:88px;line-height:1;margin-bottom:8px}.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.note img{height:180px}.note time{display:block;font:14px var(--condensed);color:#777;margin:9px 10px 4px}.note h2{font-size:23px;font-weight:400;line-height:1.12;margin:0 10px}.contact-top{display:grid;grid-template-columns:51% 49%;min-height:520px;padding:55px 40px 45px}.contact-copy .eyebrow{margin-bottom:25px}.contact-copy h1{font-size:115px}.contact-copy p{font-size:22px;max-width:370px;margin-top:28px;line-height:1.3;color:#555}.contact-links{padding-left:40px}.contact-links div{margin-bottom:30px}.contact-links small{display:block;color:#777;font-size:15px;text-transform:uppercase;margin-bottom:5px}.contact-links a,.contact-links p{font-size:22px}.contact-image{height:240px}.interests{display:flex;gap:40px}.article{padding:50px;max-width:900px;margin:auto}.article h1{font-size:64px;line-height:1.05;margin:30px 0}.article img{max-height:400px}.article p{font-size:22px;line-height:1.6;margin:28px 0}.empty{padding:80px 0;color:#777}
@media(min-width:1500px){.shell{margin:30px auto;border-top:1px solid #aaa;border-bottom:1px solid #aaa}}
@media(max-width:1000px){header{height:72px;padding:0 25px}nav{gap:28px}.brand{font-size:20px}.filters{top:80px;width:calc(28.6% - 30px);left:10px}.filters button{font-size:11px;padding-left:19px}.filters button:first-child{font-size:15px}.filters small{font-size:11px}.project-hero{height:470px}.project-hero h1{top:30px;left:29%}.display{font-size:88px}.count{font-size:48px}.hero-image{top:145px}.hero-caption{font-size:13px}.mosaic{grid-template-rows:240px 240px;gap:10px 16px}.caption{font-size:13px}.caption .number{font-size:12px}.tile .caption{padding:12px}.tile.ce7 .caption{padding:15px}.filtered .display{font-size:66px}.filtered-grid img{height:245px}.portrait{height:720px}.about-copy h1{font-size:98px}.about-copy .bio{font-size:18px}.eyebrow{font-size:20px}.background h2{font-size:36px}.background ul{font-size:12px;padding:10px 20px}.contact-copy h1{font-size:98px}.contact-links a,.contact-links p{font-size:17px;overflow-wrap:anywhere}.note img{height:120px}.note h2{font-size:18px}.notes-grid{gap:18px}.detail-top{min-height:490px}.detail h1{font-size:78px}.subtitle{font-size:30px}.description{font-size:18px;max-width:380px}.metadata{font-size:14px;gap:15px}.detail-images>.main-image{height:540px}.detail-thumbs img{max-height:173px}}
@media(max-width:600px){.shell{border:0;background:linear-gradient(to right,transparent 49.8%,var(--line) 50%,transparent 50.2%)}header{height:78px;padding:0 16px;gap:15px}.brand{font-size:17px;max-width:110px}nav{gap:15px}nav a{font-size:10px}nav a.active{font-size:15px}.projects{padding:0 16px 20px}.filters{position:relative;top:auto;left:auto;width:100%;display:flex;flex-wrap:wrap;gap:4px 15px;padding:22px 0}.filters button{width:auto;gap:12px;font-size:10px;padding:5px 0 5px 10px}.filters button:first-child{font-size:12px;margin:0}.filters button.active:before{font-size:16px;left:0}.filters small{font-size:10px}.project-hero{height:420px;margin:0 -16px 0 0}.project-hero h1{left:0;top:12px;font-size:80px;letter-spacing:-3px}.count{font-size:42px;margin-top:14px}.hero-image{left:32%;top:175px}.hero-caption{right:70%;bottom:15px;font-size:11px;max-width:85px}.mosaic{grid-template-columns:1fr 1fr;grid-template-rows:235px 235px 235px;gap:12px}.tile.roami{grid-column:1;grid-row:1}.tile.ce7{grid-column:2;grid-row:1}.tile.tennis{grid-column:1/3;grid-row:2}.tile.color{grid-column:1;grid-row:3}.tile.visual{grid-column:2;grid-row:3;padding-top:0}.tile.ce7 .caption{width:90%;padding:14px 10px}.tile.color img,.tile.visual img{height:76%}.caption{font-size:12px}footer{padding:0 16px;min-height:60px;font-size:10px}footer button{font-size:10px}.filtered{margin:0;min-height:530px;padding-top:10px}.filtered .display{font-size:64px}.filtered-grid{gap:15px;grid-template-columns:1fr 1fr}.filtered-grid img{height:190px}.about-top{padding:16px 0 0 16px;grid-template-columns:44% 56%}.about-copy{padding:16px 15px 20px 0}.eyebrow{font-size:16px;margin-bottom:25px}.about-copy h1{font-size:62px;letter-spacing:-4px}.portrait{height:500px}.about-copy .bio{font-size:13px;line-height:1.35;padding-top:38px}.bio p+p{margin-top:18px}.strip{padding:22px 16px;font-size:10px}.background{padding:20px 0 0 16px;grid-template-columns:36% 40% 24%}.background h2{font-size:24px;letter-spacing:-1px}.background .eyebrow{margin:10px 0 20px}.background img{height:190px}.background ul{font-size:8px;padding:5px 8px}.notes{padding:0 16px 24px}.notes .filters{top:auto}.notes-content{margin:0}.notes h1{font-size:68px}.notes-grid{grid-template-columns:1fr 1fr;gap:23px 14px}.note img{height:110px}.note h2{font-size:16px;margin:0 3px}.note time{font-size:11px;margin:8px 3px 3px}.contact-top{padding:32px 18px;grid-template-columns:47% 53%;min-height:410px}.contact-copy h1{font-size:69px;letter-spacing:-4px}.contact-copy p{font-size:14px;margin-top:22px;max-width:145px}.contact-links{padding-left:17px}.contact-links small{font-size:10px}.contact-links a,.contact-links p{font-size:12px}.contact-links div{margin-bottom:24px}.contact-image{height:160px}.interests{gap:12px;font-size:8px}.detail{padding:24px 16px}.detail-top{grid-template-columns:1fr;min-height:0}.back{font-size:11px}.detail-number{font-size:16px;margin-top:20px}.detail h1{font-size:67px;margin-top:25px}.subtitle{font-size:26px}.description{font-size:16px;margin:25px 0 20px}.visit{font-size:15px}.metadata{padding:30px 0;grid-template-columns:1fr 1fr;font-size:13px}.detail-images{grid-template-columns:1fr;gap:12px}.detail-images>.main-image{height:330px}.detail-thumbs{grid-template-columns:repeat(3,1fr);grid-template-rows:140px;gap:10px}.detail-thumbs img{height:140px}.article{padding:30px 18px}.article h1{font-size:42px}.article p{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(min-width:1001px){.project-hero .display{font-size:160px;letter-spacing:-6px}.project-hero .count{font-size:80px}.filters button{font-size:19px}.filters button:first-child{font-size:25px}.filters small{font-size:18px}.mosaic{grid-template-rows:400px 350px}.tile.ce7{height:340px}.tile.color{transform:translateY(-60px);height:410px}.tile.visual{padding-top:0}}

/* The reference sweeps from the lower left to the bottom-right corner. */
.tile.tennis>img{clip-path:url(#tennis-bottom-curve)}
.tile.tennis .caption{background:transparent;clip-path:none;padding:12px;min-width:0}

/* Layer the supplied coastline and phone to reproduce the reference artwork. */
.roami-composition{position:absolute;inset:0;overflow:hidden}
.roami-composition .roami-background{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,100% 86%,0 61%)}
.roami-composition .roami-phone{position:absolute;left:19%;top:3%;width:74%;height:auto;clip-path:url(#roami-phone-outline)}
.tile.roami .caption{background:transparent;clip-path:none;min-width:0;padding:12px;z-index:1}
@media(max-width:600px){.roami-composition{width:145%;left:0}.tile.roami .caption{padding:10px;font-size:11px}}

/* Equal frames retain each complete Digital Experiences image. */
.filtered-grid.digital-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.filtered-grid.digital-grid img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:var(--paper)}
/* On desktop, every digital project fills the same widescreen rectangle. */
@media(min-width:1001px){
  .filtered-grid.digital-grid img{object-fit:cover;object-position:center}
}